Угловой 6: Ошибка ОШИБКА: не удается найти элемент управления с неопределенным атрибутом имени с угловым материалом и реактивными формами

Question

У меня есть массив строк, из которого я хочу отобразить его в текстовом поле.Я использую реактивные формы.Я знаю, что есть похожие вопросы тоже.Но я не получил решение.Поэтому я публикую это как новый вопрос здесь.

ts file:

  ngOnInit() {
    if(this.data.data && this.data.data.length) {
      this.orderForm = this.formBuilder.group({
        items: this.formBuilder.array([ ])
      })

      this.setCheckBoxValue();
    }
    this.blankForm = this.formBuilder.group({
      blankItems: this.formBuilder.array([])
    })
  }

  setCheckBoxValue() {
    this.items = this.orderForm.get('items') as FormArray;
      this.data.data.forEach((element) => {
        this.items.push(this.formBuilder.group({
          checked: element,
          selected: true,
        }))
      });

  }

файл шаблона:

<div *ngIf="data.data.length" [formGroup]="orderForm">
      <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls;let i=index">
        <div class="row" [formGroupName]="i">
          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
            <mat-checkbox [formControl]="item.selected" class="ml-a" [checked]="item.controls.selected.value" >
            </mat-checkbox>
          </div>
          <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <mat-form-field 
            floatPlaceholder="never" class="margin-top-25px example-full-width" >
                <input 
                matInput
                class="input"
                [formControl]="item.checked"
                value="{{item.controls.checked.value}}"
                placeholder="{{data.title}}"
                >
            </mat-form-field>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" *ngIf="data.title == 'Work Method'">
            <mat-form-field class="example-full-width margin-top-25px">
              <input 
              type="number"
              class="input-price"
              [formControl]="item.price"
              value="{{item.controls.price.value}}"
              placeholder="price"
              matInput >
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>

Данные отображаются в текстовом поле.Но я получаю следующую ошибку:

ERROR Error: Cannot find control with unspecified name attribute
    at _throwError (forms.js:2432)
    at setUpControl (forms.js:2300)
    at FormControlDirective.push../node_modules/@angular/forms/esm5/forms.js.FormControlDirective.ngOnChanges (forms.js:6461)
    at checkAndUpdateDirectiveInline (core.js:12407)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)
    at debugCheckDirectivesFn (core.js:14712)
    at Object.eval [as updateDirectives] (ModalDialogComponent.html:10)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)

Пожалуйста, помогите мне ..

Answer 1

Я заметил, что вы используете неправильный синтаксис для реактивных форм в вашем шаблоне.

Для обоих входов следует использовать атрибут formControlname и назначить им имя свойства его элементов управления формы.

<input 
  matInput
  class="input"
  formControlName="checked"
  value="{{item.controls.checked.value}}"
  placeholder="{{data.title}}"
>

<input 
  type="number"
  class="input-price"
  formControlName="price"
  value="{{item.controls.price.value}}"
  placeholder="price"
  matInput 
>