Angular 5 formGroup formControlName 问题与选择选项答案

【问题标题】：Angular 5 formGroup formControlName issue with select optionsAngular 5 formGroup formControlName 问题与选择选项
【发布时间】：2017-12-14 23:16:39
【问题描述】：

更新

我们正在使用 Angular5，我们有一个使用 FormGroup 构建的表单，然后使用 formgroup 和 formControlName 绑定。

在初始加载时，所有输入字段中的所有内容都正确填充。关闭模式并单击另一条记录后，会使用正确的 userFrm 值填充所有字段，但 Salutation 和 AwardStatus Dropbox 除外。如果您单击第一条记录，则这些值是正确的。这一直给我们带来问题。我很确定这是 [Selected[ 属性未更新。

user.component.ts sn-p

ngOnInit(): void {
        this.indLoading = true;
        this.loadSalutationField();
        this.loadResearchField();
        this.loadTrustField();
        this.loadRegionField();
        this.loadAwardStatusField();
        this.loadRoleField();
        this.loadUsers();
        this.indLoading = false;
        this.createForm();
    }

    createForm() {
        this.userFrm = new FormGroup({
            UserKey: new FormControl(''),
            SiID: new FormControl('', Validators.required),
            OrcidID: new FormControl(''),
            Salutation: new FormControl({}),
            FirstName: new FormControl('', Validators.required),
            Surname: new FormControl('', Validators.required),
            CurrentPost: new FormControl(''),
            Department: new FormControl(''),
            Institution: new FormControl(''),
            Region: new FormControl({}),
            PrimaryResearchField: new FormControl({}),
            SecondaryResearchField: new FormControl({}),
            NHSTrust: new FormControl({}),
            Street: new FormControl(''),
            City: new FormControl(''),
            County: new FormControl(''),
            Postcode: new FormControl(''),
            Telephone: new FormControl(''),
            Mobile: new FormControl(''),
            Email: new FormControl('', Validators.required),
            Fax: new FormControl(''),
            SecondaryEmail: new FormControl(''),
            ProfessionalBackground: new FormControl(''),
            ApprovalStatus: new FormControl(''),
            Biography: new FormControl(''),
            NIHRAccount: new FormControl(''),
            IsCurrent: new FormControl(''),
            AwardStatusDate: new FormControl(''),
            CreatedDate: new FormControl(''),
            UpdatedDate: new FormControl(''),
            IsActive: new FormControl(''),
            Image: new FormControl({}),
            AwardStatus: new FormControl({}),
            Role: new FormControl({})
        });
    }

updateUserForm() {
        this.userFrm.setValue({
            UserKey: this.user.UserKey,
            SiID: this.user.SiID,
            OrcidID: this.user.OrcidID,
            Salutation: this.user.Salutation,
            FirstName: this.user.FirstName,
            Surname: this.user.Surname,
            CurrentPost: this.user.CurrentPost,
            Department: this.user.Department,
            Institution: this.user.Institution,
            Region: this.user.Region,
            PrimaryResearchField: this.user.PrimaryResearchField,
            SecondaryResearchField: this.user.SecondaryResearchField,
            NHSTrust: this.user.NHSTrust,
            Street: this.user.Street,
            City: this.user.City,
            County: this.user.County,
            Postcode: this.user.Postcode,
            Telephone: this.user.Telephone,
            Mobile: this.user.Mobile,
            Email: this.user.Email,
            Fax: this.user.Fax,
            SecondaryEmail: this.user.SecondaryEmail,
            ProfessionalBackground: this.user.ProfessionalBackground,
            ApprovalStatus: this.user.ApprovalStatus,
            Biography: this.user.Biography,
            NIHRAccount: this.user.NIHRAccount,
            IsCurrent: this.user.IsCurrent,
            AwardStatusDate: this.user.AwardStatusDate,
            CreatedDate: this.user.CreatedDate,
            UpdatedDate: this.user.UpdatedDate,
            IsActive: this.user.IsActive,
            Image: this.user.Image,
            AwardStatus: this.user.AwardStatus,
            Role: this.user.Role
        });

editUser(userKey: number) {
        this.dbops = DBOperation.update;
        this.setControlsState(true);
        this.createForm();
        this.modalTitle = "Edit User";
        this.modalBtnTitle = "Update";
        this.user = this.users.filter(x => x.UserKey === userKey)[0];
        this.dangerousImage = "data:image/jpg;base64," + this.user.Image.ImageStream;
        this.trustedImage = this._sanitizer.bypassSecurityTrustUrl(this.dangerousImage);
        this.updateUserForm();
        this.editModal.open();
    }

user.component.html

<bs-modal #editModal [keyboard]="false" [backdrop]="'static'">
    <form [formGroup]="userFrm" (ngSubmit)="onSubmit()" novalidate>
        <!--<pre>{{userFrm.value | json}}</pre>-->
        <bs-modal-header>
            <h4 class="modal-title">{{modalTitle}}</h4>
        </bs-modal-header>
        <bs-modal-body>
            <div class="square">
                <img [src]="trustedImage" />
                <button (click)="updateUserPhoto(user.UserKey)">Upload Image</button>
            </div>
            <br />
            <div class="form-group" *ngIf="isAdmin">
                <span>Role*</span>
                <select class="form-group" formControlName="Role">
                    <option *ngFor="let role of roles"
                            [value]="role"
                            [selected]="role.Description === userFrm.value.Role.Description">
                        {{role.Description}}
                    </option>
                </select>
            </div>
            <div class="form-group" *ngIf="isAdmin">
                <span>
                    Award Status*
                </span>
                <select class="form-group" formControlName="AwardStatus">
                    <option *ngFor="let awardStatus of awardStatues"
                            [value]="awardStatus"
                            [selected]="awardStatus.Description == userFrm.value.AwardStatus.Description">
                        {{awardStatus.Description}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <span>SI Number*</span>
                <input type="text" class="form-control" placeholder="Si Number" formControlName="SiID" />
            </div>
            <div class="form-group">
                <span>Title*</span>
                <select class="form-control" formControlName="Salutation">
                    <option *ngFor="let salutationfield of salutationfields"
                            [value]="salutationfield"
                            [selected]="salutationfield.Description === userFrm.value.Salutation.Description">
                        {{salutationfield.Description}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <span>First name*</span>
                <input type="text" class="form-control" placeholder="First name" formControlName="FirstName" />
            </div>
            <div class="form-group">
                <span>Surname*</span>
                <input type="text" class="form-control" placeholder="Surname" formControlName="Surname" />
            </div>
            <div class="form-group">
                <span>Orchid ID*</span>
                <input type="text" class="form-control" placeholder="OrcidID" formControlName="OrcidID" />
            </div>
            <div class="form-group">
                <span>Telephone*</span>
                <input type="text" class="form-control" placeholder="Telephone" formControlName="Telephone" />
            </div>
            <div class="form-group">
                <span>Email*</span>
                <input type="text" class="form-control" placeholder="Email" formControlName="Email" />
            </div>
            <div class="form-group">
                <span>Current Post*</span>
                <input type="text" class="form-control" placeholder="Current Post" formControlName="CurrentPost" />
            </div>
            <div class="form-group">
                <span>Institution*</span>
                <input type="text" class="form-control" placeholder="Institution" formControlName="Institution" />
            </div>
            <div class="form-group">
                <span>Department*</span>
                <input type="text" class="form-control" placeholder="Department" formControlName="Department" />
            </div>
            <div class="form-group">
                <span>NHS Trust*</span>
                <select formControlName="NHSTrust">
                    <option *ngFor="let trustfield of trustfields"
                            [value]="trustfield"
                            [selected]="trustfield.Description === userFrm.value.NHSTrust.Description">
                        {{trustfield.Description}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <span>Region*</span><br />
                <select formControlName="Region">
                    <option *ngFor="let regionfield of regionfields"
                            [value]="regionfield"
                            [selected]="regionfield.Description === userFrm.value.Region.Description">
                        {{regionfield.Description}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <span>Primary Research Field*</span><br />
                <select formControlName="PrimaryResearchField">
                    <option *ngFor="let priResearchField of researchfields"
                            [value]="priResearchField"
                            [selected]="priResearchField.Description === userFrm.value.PrimaryResearchField.Description">
                        {{priResearchField.Description}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <span>Secondary Research Field*</span><br />
                <select formControlName="SecondaryResearchField">
                    <option *ngFor="let secResearchField of researchfields"
                            [value]="secResearchField"
                            [selected]="secResearchField.Description === userFrm.value.SecondaryResearchField.Description">
                        {{secResearchField.Description}}
                    </option>
                </select>
            </div>
            <br />
            <div class="form-group">
                <accordion>
                    <accordion-group heading="Biography">
                        <input type="text" class="form-control" placeholder="Biography" formControlName="Biography" />
                    </accordion-group>
                </accordion>
            </div>
        </bs-modal-body>
        <bs-modal-footer>
            <div>
                <a class="btn btn-default" (click)="editModal.close()">Cancel</a>
                <button type="submit" [disabled]="userFrm.invalid" class="btn btn-primary">{{modalBtnTitle}}</button>
            </div>
        </bs-modal-footer>
    </form>
</bs-modal>

对此的任何想法将不胜感激。

在此先感谢

刘易斯

【问题讨论】：

你有没有尝试将this.userFrm = this.fb.group({...})直接放在构造函数中？不将其作为单独的函数使用，然后在初始化组件constructor(){this.createUserForm();} 时调用它。试试这个：import {FormGroup, ...} from '@angular/forms'; export class UserComponent { public userFrm: FormGroup; constructor(){this.userFrm = this.fb.group({ UserKey: [''],...}) } }
嗨@k.vincent 我已经尝试过了，还尝试将它直接放在 ngOnInit() 中
您是否遇到任何错误或类似情况？我们可能需要更多的输入来定位问题。
我在通过和重构userFrm后更新了上面的问题。现在解决了下拉值的问题，并且除了 2 个选择元素（AwardStatus 和 Salutation）之外的所有选择元素中都填充了正确的值。我单击的第一条记录有效并正确填充。使用
```
{{userFrm.value | json}}
```
我已经能够密切关注 userFrm 以确保它更新它的数据。但是 [Selected] 属性似乎无法正常工作。
我想提一提...为什么每次都为每个字段创建FormControl 的实例？有什么理由吗？我会改为使用 @angular/forms 中的 FormBuilder... 这将为您节省大量代码，使代码可维护并避免任何意外错误。

标签： typescript angular5 form-control formgroups

【解决方案1】：

所以在 angular 4 [compareWith] 之后被引入。这在使用 ngValue 和 FormGroups 时替换了 [selected]

【讨论】：