src/app/reactive-form/reactive-form.component.html:47:48 - error TS2531: Object is possibly 'null'. src/app/reactive-form/reactive-form.component.ts

Question

Object is possibly 'null'. Element implicitly has an 'any' type because expression of type '"controls"' can't be used to index type 'AbstractControl<any, any>'.

Property 'controls' does not exist on type 'AbstractControl<any, any>'.

<div class="form-group" formArrayName="skills">
    <ng-container *ngFor="let skill of reactiveForm.get('skills')['controls']; let i = index;">
          <label for="Skills">Skills</label>
          <input type="text">
    </ng-container>
</div>

ts file

reactiveForm!: FormGroup;
ngOnInit(): void {
    this.reactiveForm = new FormGroup({
      // To set default value we need to pass this value instead of null.
      firstname: new FormControl(null, Validators.minLength(4)),
      lastname: new FormControl(null, Validators.required),
      email: new FormControl('[email protected]', [Validators.required, Validators.email]),
      country: new FormControl('Canada'),
      gender: new FormControl('male'),
      hobbies: new FormControl(null),
      skills: new FormArray([
        new FormControl(null),
      ])
    })
  }

  onSubmit() {
    console.log(this.reactiveForm);
  }
}

Answer 1

in ts file write a getter for skills

get skills() {
  return this.reactiveForm.get('skills') as FormArray;
}

and in HTML

<div class="form-group" formArrayName="skills">
  <ng-container *ngFor="let skill of skills.controls; let i = index;">
        <label for="Skills">Skills</label>
        <input type="text">
  </ng-container>
</div>