更新
我们正在使用 Angular5，我们有一个使用 FormGroup 构建的表单，然后使用 formgroup 和 formControlName 绑定。
在初始加载时，所有输入字段中的所有内容都正确填充。关闭模式并单击另一条记录后，会使用正确的 userFrm 值填充所有字段，但 Salutation 和 AwardStatus Dropbox 除外。如果您单击第一条记录，则这些值是正确的。这一直给我们带来问题。我很确定这是 [Selected[ 属性没有更新。
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
<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>
对此的任何想法将不胜感激。
提前谢谢了
刘易斯