Update
We are using Angular5 and we have a form that is constructed using FormGroup and then binded using formgroup and 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.
user.component.ts snippet
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>
Any ideas on this would be greatly appreciated.
Many thanks in advance
Lewis
{{userFrm.value | json}}i have been able to keep an eye on the userFrm to make sure its updating the data which it is. However the [Selected] property does not seem to be working correctly. – Lewis Dec 13 '17 at 17:05