Angular 5 formGroup formControlName Ausgabe mit ausgewählten Optionen

Question

aktualisieren

Wir verwenden Angular5 und wir haben eine Form, die FormGroup aufgebaut ist und anschließend binded formgroup und formControlName verwenden.

Beim erstmaligen Laden werden alle Eingabefelder korrekt ausgefüllt. Nachdem Sie das Modal geschlossen und dann auf einen anderen Datensatz geklickt haben, werden alle Felder mit dem korrekten userFrm-Wert gefüllt, mit Ausnahme der Dropbox "Salutation" und "AwardStatus". Wenn Sie auf den ersten Datensatz klicken, sind die Werte korrekt. Dies hat uns Probleme bereitet. Ich bin mir ziemlich sicher, dass es die [Ausgewählt [Eigenschaft wird nicht aktualisiert wird.

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> 

auf diese Irgendwelche Ideen wäre sehr dankbar.

Vielen Dank im Voraus

Lewis

Answer 1

so nach Winkel 4 [compareWith], eingeführt wurde. Dies ersetzt [ausgewählt], wenn ngValue und FormGroups

Sehen Sie diese Frage für weitere Informationen

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

mit