typescript Angular 5 formGroup formControlName 问题与选择选项

Angular 5 formGroup formControlName issue with select options

提问by Lewis

Update

更新

We are using Angular5 and we have a form that is constructed using FormGroup and then binded using formgroup and formControlName.

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

On initial load everything is populating correctly in all input fields. After closing the modal and then clicking on another record populates all fields with the correct userFrm value except the Salutation and AwardStatus Dropbox. If you click back on the first record then the values are correct. This has been causing issues for us. I'm pretty sure it is the [Selected[ property is not updating.

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

user.component.ts snippet

user.component.ts 片段

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

用户组件.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>

Any ideas on this would be greatly appreciated.

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

Many thanks in advance

提前谢谢了

Lewis

刘易斯

采纳答案by Lewis

so after angular 4 [compareWith], was introduced. This replaces [selected] when using ngValue and FormGroups

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

See this question for more information

有关更多信息，请参阅此问题

Angular 4 - Reactive Forms - select item in a list from object not referenced in this list - trackby issue?

Angular 4 - 反应式表单 - 从此列表中未引用的对象中选择列表中的项目 - trackby 问题？