Данные углового массива не заполняются для формирования входных данных с помощью [(ngModel)]

Question

У меня есть следующий код:

ngOnInit(){
    this.i = 1;
    this.numbers = Array(this.i).fill(0).map((x,i)=>i);
    for(let num=0; num<this.i; num++){
      this.validator.rule.parameters.parameter[num] = new Parameter();
    }
  }
paramCountInc(){
    this.i += 1;
    // here I want the size of parameter array to increase by the value of i. So I initialize new array index which is undefined at first
    for(let num=0; num<this.i; num++){
      if(this.validator.rule.parameters.parameter[num] == undefined){
        this.validator.rule.parameters.parameter[num] = new Parameter();
      }
    }
    // here I create an iterable object to use in HTML using *ngFor
    this.numbers = Array(this.i).fill(0).map((x,i)=>i);
  }

HTML-код:

    <div class="params" *ngFor="let number of numbers">
            {{number}}<br>
            <mat-form-field class="parameters">
                <input matInput placeholder="Name (Parameter {{number+1}})" [(ngModel)]="validator.rule.parameters.parameter[number].name" name="validator.rule.parameters.parameter[number].name">
            </mat-form-field>
            &nbsp;
            <mat-form-field class="parameters">
                <input matInput placeholder="Priority (Parameter {{number+1}})" [(ngModel)]="validator.rule.parameters.parameter[number].priority" name="vali

dator.rule.parameters.parameter[number].priority">
        </mat-form-field>
        &nbsp;
        <mat-form-field class="parameters">
            <input matInput placeholder="Type (Parameter {{number+1}})" [(ngModel)]="validator.rule.parameters.parameter[number].type" name="validator.rule.parameters.parameter[number].type">
        </mat-form-field>
        &nbsp;
        <mat-form-field class="parameters">
            <input matInput placeholder="Value (Parameter {{number+1}})" [(ngModel)]="validator.rule.parameters.parameter[number].value" name="validator.rule.parameters.parameter[number].value">
        </mat-form-field>
    </div>

<button type="button" mat-raised-button color="primary" (click)="paramCountInc()">
            Add
</button>

Когда я нажимаю кнопку добавления, я хочу, чтобы данные заполнялись в форме. Проблема в том, что если вы пишете несколько журналов, чтобы увидеть, что после нажатия кнопки «Добавить» данные успешно созданы, но не заполнены в формах.