Angulaire 5 formGroup formControlName problème avec sélectionnez options

Mise à jour

Nous utilisons Angular5 et nous avons une forme qui est construit à l'aide FormGroup et puis appliqué à l'aide de formgroup et formControlName.

Sur chargement initial, le tout est de peupler correctement dans tous les champs de saisie. Après la fermeture de l'modal et en cliquant ensuite sur un autre record renseigne tous les champs avec le bon userFrm valeur à l'exception de la formule de politesse et AwardStatus Dropbox. Si vous cliquez de nouveau sur le premier disque, puis les valeurs sont correctes. Cela a été à l'origine de problèmes pour nous. Je suis sûr que c'est le [Sélectionnés[ propriété n'est pas mise à jour.

de l'utilisateur.composante.ts extrait de

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>

Toutes les idées sur ce serait grandement apprécié.

Merci beaucoup à l'avance

Lewis