Angular Reactive Forms: dynamic selection dropdown not bound

Question

I have two data arrays: AssociatedPrincipals (previously saved data) and ReferencePrincipals (static data to populate in the drop-down controls). I am trying to get the previous value from AssociatedPrincipals to display / select in a dynamic amount (most examples use a single drop-down menu) drop-down lists when the page loads.

I am not sure how to set up the form (the code behind and the HTML), especially by setting the Select formControlName. Currently, the static values ​​in each drop-down list are populated, but I cannot get the right value selected.

public ngOnInit() {
    this.factsForm = this.formbuilder.group({
        associatedPrincipals: this.formbuilder.array([]),
        referencePrincipals: this.formbuilder.array([])
    });

    // Data for both of these methods comes from external source...
    var responseData = // HTTP source...
    // Push retrieved data into form
    this.initPrincipals(responseData[0]);
    // Push static data into form
   this.initStaticData(responseData[1]);
}

public initPrincipals(principals?: IAssociatedPrincipal[]): FormArray {
    principals.forEach((principal) => {
 this.associatedPrincipals.push(this.createPrincipalFormGroup(principal));
    });
}

public initStaticData(response: IReferencePrincipal[]) {
   response.forEach((principal) => {
      this.referencePrincipals.push(
           this.formbuilder.control({
                code: principal.code,
                canHaveLead: principal.canHaveLead,
                isDuplicate: false
              }));
        });
}

public createPrincipalFormGroup(principal: IAssociatedPrincipal) {
        return this.formbuilder.group({
            code: principal.code,
            canHaveLead: false,
            isDuplicate: false
        });
    }

public get associatedPrincipals(): FormArray {
        return this.factsForm.get('associatedPrincipals') as FormArray;
    }

    public get referencePrincipals(): FormArray {
        return this.factsForm.get("referencePrincipals") as FormArray;
    }

HTML:

 <form novalidate [formGroup]="factsForm">
        <div formArrayName="associatedPrincipals">
             <div *ngFor="let associatedPrincipal of associatedPrincipals.controls; let i=index;" [formGroupName]="i" >
                <select class="form-control create-input"
                        formControlName="i">
                     <option value=null disabled selected hidden>--Select--</option>
                       <option *ngFor="let refPrincipal of referencePrincipals.controls" [ngValue]="refPrincipal">refPrincipal.value.code</option>
                 </select>
             </div>
         </div>
    </form>

I appreciate any feedback!

EDIT: Plunker, : https://embed.plnkr.co/XMLvFUbuc32EStLylDGO/

Answer 1

, , :

• formControlName, select.
• .

associatedPrincipals, . associatedPrincipals, Array, :

associatedPrincipals = {
  "0": FormControl,
  "1": FormControl
}

, i, *ngFor, formControlName.

<select formControlName="{{i}}" style="margin-top: 10px">
   ...
</select>

option, Angular option .

( referencePrincipals formControls) formControl associatedPrincipals ( @Fetra R.). , , .

, compareWith, , . docs.

compareWith, compareFun, Angular, ( ) . comparing object instance comparing object fields .

<select formControlName="{{i}}" style="margin-top: 10px" [compareWith]="compareFun">
  <option value=null disabled selected hidden>--Select--</option>
  <option *ngFor="let refPrincipal of referencePrincipals.controls"
     [ngValue]="refPrincipal.value">{{ refPrincipal.value.code }}</option>
</select>

// tell angular how to compare two objects
compareFn(item1, item2): boolean {
  return item1 && item2 ? item1.code === item2.code : item1 === item2;
}

docs demo, .

Answer 2

, , .

FormControl referencePrincipals selectbox, :

public createPrincipalFormControl(principal) {
    const selectedFormControl = this.referencePrincipals.controls.find(form => form.value.code === principal.code)
    return this.formbuilder.control(selectedFormControl.value);
}

. https://plnkr.co/edit/vw3WZ6?p=preview

Answer 3

2 .

• , , . , this.initiPrincipals(responseData[0]) var responseData, http-, Observable.

  let subscription = myservice.getmedata.subscribe(data => { //here you should do your initializations with data from server };

  @Input(), ngOnChanges.

• , , , , , , , . - :

  this.formGroup.controls['yourSelectControl'].patchValue(this.yourInitialCollectionOfOptions.find(v => v.propertyByWhichYouWantToCompare == valueFromServer.propertyByWhichYouWantToCompare)