angular - reactiveform that does not compile

Question

I am working on an angular 10 application. I have a component that is a child of another component. Here is the template

<form [formGroup]="localForm">
  <mat-checkbox formControlName="flag1">{{labelCheckBox}}</mat-checkbox>
  (line15)
  <mat-radio-group
    *ngIf="localForm?.controls['flag1']?.value"
    class="radio-vertical"
    formControlName="flag2">
    <mat-radio-button value="{{localForm?.controls['flag2']?.value}}">text1</mat-radio-button>
    <mat-radio-button value="{{!localForm?.controls['flag2']?.value}}">text2</mat-radio-button>
  </mat-radio-group>
  <div *ngIf="localForm?.controls['flag1']?.value" formArrayName="datas">
    <div
      *ngFor="let dataTerm of datas.controls; let index = index;"
      formControlName="index">
      <mat-form-field
        *ngIf="localForm?.controls['datas'][index].controls['code']?.value === '00' && localForm?.controls['flag2'].value">
        <mat-label>text3</mat-label>
        <mat-select formControlName="modeI">
          <mat-option [value]=""></mat-option>
          <mat-option *ngFor="let ta of modes | keyvalue" [value]="ta.key">{{ ta.value }}</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field
        *ngIf="localForm?.controls['datas'][index].controls['code']?.value != '00' && !localForm?.controls['flag2'].value">
        <mat-label>{{localForm?.controls['datas'][index].controls['typeRecu']?.value}}</mat-label>
        <mat-select formControlName="modeI">
          <mat-option [value]=""></mat-option>
          <mat-option *ngFor="let ta of modes | keyvalue" [value]="ta.key">{{ ta.value }}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
</form>

and in the constructor, I initialise the formGroup

export class myComponent implements OnInit {
  localForm: FormGroup;

  @Input()
  labelCheckBox!: string;

  @Input()
  modes!: Record<string, string>;

  constructor() {
    this.localForm = new FormGroup({
      property1: new FormControl(""),
      property2: new FormControl(""),
      property3: new FormControl(""),
      property4: new FormControl(""),
      property5: new FormControl(""),
      property6: new FormControl(""),
      property7: new FormControl(""),
      property8: new FormControl("250", [Validators.required]),
      property9: new FormControl("", [Validators.required]),
      property10: new FormControl("", [Validators.required]),
      property11: new FormControl({ value: 0, disabled: true }, [
        Validators.required,
      ]),
      property12: new FormControl(0, []),
      property13: new FormControl({ value: "", disabled: true }, [
        Validators.required,
      ]),
      flag2: new FormControl(true),
      flag1: new FormControl(false),
      datas: new FormArray([
        new FormGroup({
          modeI: new FormControl("val11"),
          co: new FormControl("val12"),
          tR: new FormControl("val13"),
          tF: new FormControl("val14"),
        }),
        new FormGroup({
          modeI: new FormControl("val21"),
          co: new FormControl("val22"),
          tR: new FormControl("val23"),
          tF: new FormControl("val24"),
        }),
        new FormGroup({
          modeI: new FormControl("val31"),
          co: new FormControl("val32"),
          tR: new FormControl("val33"),
          tF: new FormControl("val34"),
        }),
        new FormGroup({
          modeI: new FormControl("val41"),
          co: new FormControl("val42"),
          tR: new FormControl("val43"),
          tF: new FormControl("val44"),
        }),
        new FormGroup({
          modeI: new FormControl("val51"),
          co: new FormControl("val52"),
          tR: new FormControl("val53"),
          tF: new FormControl("val51"),
        }),
        new FormGroup({
          modeI: new FormControl("val61"),
          co: new FormControl("val62"),
          tR: new FormControl("val63"),
          tF: new FormControl("val64"),
        }),
        new FormGroup({
          modeI: new FormControl("val71"),
          co: new FormControl("val72"),
          tR: new FormControl("val73"),
          tF: new FormControl("val74"),
        }),
        new FormGroup({
          modeI: new FormControl("val81"),
          co: new FormControl("val82"),
          tR: new FormControl("val83"),
          tF: new FormControl("val84"),
        }),
      ]),
    });
  }
}

And I have two errors

TypeError: this.form._updateTreeValidity is not a function
    _updateDomValue form_group_directive.ts:271
    ngOnChanges form_group_directive.ts:94
    Angular 6
    MyComponent_Template mycomponent.ts:15

and

TypeError: this.form.get is not a function
    addControl form_group_directive.ts:132
    _setUpControl form_control_name.ts:223
    ngOnChanges form_control_name.ts:146
    Angular 6
MyComponent_Template mycomponent.ts:15

UPDATE

I replace the line

<div
      *ngFor="let dataTerm of datas.controls; let index = index;"
      formControlName="index">

by

<div *ngFor="let dataTerm of localForm.controls.datas; let i = index;" [formControlName]="i">

and I replaced index by i underneath but I still get the two errors.

SECOND UPDATE

I now use FormGroup from "@ng-stack/forms"

Here is the template

<form *ngIf="localForm" [formGroup]="localForm">
</form>

Here is the component

export class MyComponent implements OnInit {

  @Input()
  form!: FormGroup<DeepRequired<myBean>>

  localForm: FormGroup<DeepRequired<myBean>> | undefined;

  constructor() {

  }

  ngOnInit() {
    this.localForm = Object.assign({}, this.form);
  }
}

And I still get the error

TypeError: this.form._updateTreeValidity is not a function
    _updateDomValue form_group_directive.ts:271
    ngOnChanges form_group_directive.ts:94
    Angular 34

Answer 1

In the template:

1. In line 13 (*ngFor="let dataTerm of datas.controls; let index = index;"): you don't have a property in your component nor a template reference variable named datas. You probably meant localForm.controls.datas?
2. In line 14 (formControlName="index") you need to bind to index -> [formControlName]="index"