Dynamically added elements are not visible in Angular

Question

I am using a FormArray form inside a mat dialog. When I click (+) button new address fields get added, but they are not visible until I click on them.

This is the class with form

hide = true;
loginForm: FormGroup;
signInForm: FormGroup;
address: FormArray;
formisvalid = false;
emailRegx = /^(([^<>+()\[\]\\.,;:\s@"-#$%&=]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,3}))$/;

@Output()
closeDialog = new EventEmitter<boolean>();

constructor(private formBuilder: FormBuilder, private userService: UserService,
            private errorHandler: ErrorHandlingService, private successHandler: SuccessHandlerService) {
  }

  ngOnInit() {
      this.signInForm = this.formBuilder.group({
          firstname: [null, Validators.required],
          lastname: [null, Validators.required],
          email: [null, [Validators.required, Validators.pattern(this.emailRegx)]],
          password: [null, Validators.required],
          reEnterPassword: [null, Validators.required],
          mobile: [null],
          home: [null],
          address: this.formBuilder.array([this.createAddress()])
    });
}

createAddress(): FormGroup {
    return this.formBuilder.group({
      street1: [null],
      street2: [null],
      city: [null]
    })
}

addAddress(): void {
    this.address = this.signInForm.get('address') as FormArray;
    this.address.push(this.createAddress());
}

This the part with the formarray

<td colspan="2">
   <div class ="divL">
      <div formArrayName="address" *ngFor="let address of signInForm.get('address')['controls']; let i = index;">
         <form formGroupName="i">
            <table>
               <tr>
                  <td>
                     <mat-form-field class="form-field" appearance="outline">
                        <mat-label>Street 1</mat-label>
                        <input formControlName="street1" matInput />
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field class="form-field" appearance="outline">
                        <mat-label>Street 2</mat-label>
                        <input formControlName="street2" matInput />
                     </mat-form-field>
                  </td>
               </tr>
               <tr>
                  <td>
                     <mat-form-field class="form-field" appearance="outline">
                        <mat-label>City</mat-label>
                        <input formControlName="city" matInput />
                     </mat-form-field>
                  </td>
               </tr>
            </table>
         </form>
      </div>
   </div>
   <div class="divR">
      <button mat-icon-button type="button" (click)="addAddress()">
         <mat-icon aria-hidden="true" class="plus-icon">add_circle_outline</mat-icon>
      </button>
   </div>
</td>

When I click on one of the invisible fields, it becomes visible

Why does this happen? how to solve this?

Answer 1

Since you using array of formGroup index is dynamic value. so we need to use property binding for formGroupName to sync up with parent form

Change your code as follows:

formGroupName="i"====>[formGroupName]="i"

<td colspan="2">
   <div class ="divL">
      <div formArrayName="address" *ngFor="let address of signInForm.get('address')['controls']; let i = index;">
         <form [formGroupName]="i">
            <table>
               <tr>
                  <td>
                     <mat-form-field class="form-field" appearance="outline">
                        <mat-label>Street 1</mat-label>
                        <input formControlName="street1" matInput />
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field class="form-field" appearance="outline">
                        <mat-label>Street 2</mat-label>
                        <input formControlName="street2" matInput />
                     </mat-form-field>
                  </td>
               </tr>
               <tr>
                  <td>
                     <mat-form-field class="form-field" appearance="outline">
                        <mat-label>City</mat-label>
                        <input formControlName="city" matInput />
                     </mat-form-field>
                  </td>
               </tr>
            </table>
         </form>
      </div>
   </div>
   <div class="divR">
      <button mat-icon-button type="button" (click)="addAddress()">
         <mat-icon aria-hidden="true" class="plus-icon">add_circle_outline</mat-icon>
      </button>
   </div>
</td>