Блог

Я только начал работать над проектом Angular. В следующем коде я хотел бы использовать ngFor и ngModel для итерации массива и поместить значение элемента в качестве значения по умолчанию для текстовой области. И у меня есть пример с двумя значениями в массиве, все текстовые области всегда перезаписываются одним из них вместо отображения разных значений на веб-сайте. Кто-нибудь знает, что может быть возможной причиной этого?

       <mat-form-field *ngFor = "let item of model.answers; let index = index;" class="example-full-width" appearance="fill">
        <mat-label>Cluster Answer</mat-label>
        <textarea
          matInput
          id="{{item['id']}}"
          rows="7"
          placeholder="Cluster answer"
          [(ngModel)]="model.answers[index]['answer']"
          name="clusterAnswer"
          formControlName="clusterAnswer"
        ></textarea>
        <mat-hint>Define the cluster answer to be suggested</mat-hint>
      </mat-form-field>
 

вы должны определить значение в построителе форм в ts, а не в html:

 exampe.formBuilder{
test:[defaultValue]
}
 

у вас уже есть ngModel, поэтому нет необходимости указывать formControlName, использование [(ngModel)] с formControlName устарело

     <mat-form-field *ngFor = "let item of model.answers; let index = index;" class="example-full-width" appearance="fill">
            <mat-label>Cluster Answer</mat-label>
            <textarea
            matInput
            [id]="item['id']"
            rows="7"
            placeholder="Cluster answer"
            [(ngModel)]="model.answer"
            ></textarea>
            <mat-hint>Define the cluster answer to be suggested</mat-hint>
        </mat-form-field>
 

Вам необходимо указать другое значение атрибута name для каждой отдельной итерации, поскольку значение ngModel использует значение атрибута name для подключения нового элемента управления с предоставленным именем к форме.

В вашем случае даже нет необходимости использовать двустороннюю привязку данных (бананна в поле [(ngModel)]), потому что у вас уже есть состояние формы внутри самой формы, поэтому вы можете просто использовать [ngModel] для привязки значения, если оно есть, и когда захотитечтобы получить новые значения, которые вы можете использовать @ViewChild(NgForm) form: NgFrom для получения формы из вашего представления (вероятно, будет лучше запросить ее, используя имя переменной шаблона. Это будет выглядеть примерно так <form #f="ngForm"> , где f находится ваша переменная шаблона. Также проверьте дочерний декоратор представления) или внутри события ngSubmit вашей формы вы можете указать значение формы, используя переменную шаблона. <form #f="ngForm" (ngSubmit)="submitHandler(f.value)"> .

Я не рекомендую использовать двустороннюю привязку данных, потому что происходит то, что мы храним одни и те же значения в двух разных местах:

• состояние каждого отдельного элемента управления ngModel, который у нас есть
• внутри состояния вашего компонента.

Также директива formControlName поступает из реактивных форм, и нехорошо смешивать оба типа форм внутри одной формы.

 <mat-form-field *ngFor="let item of model.answers; let i = index;" class="example-full-width" appearance="fill">
  <mat-label>Cluster Answer</mat-label>
    <textarea
       matInput
       [id]="item['id']"
       rows="7"
       placeholder="Cluster answer"
       [ngModel]="model?.answers?[i]?['answer']"
       [name]="'clusterAnswer'   i"
    ></textarea>
  <mat-hint>Define the cluster answer to be suggested</mat-hint>
</mat-form-field>