При отображении данных из ответа API я получаю эту ошибку: ** ОШИБКА TypeError: Невозможно создать свойство 'validator' для строки ** - PullRequest
Новая
       65

При отображении данных из ответа API я получаю эту ошибку: ** ОШИБКА TypeError: Невозможно создать свойство 'validator' для строки **

0 голосов
/ 13 июня 2019

Для отображения ответа API на файл шаблона я использовал реактивные формы. Мое требование к проекту состоит в том, чтобы, если ответ API содержал некоторые данные, отображал их, и я тоже мог добавлять динамические данные, и все эти данные должны храниться в БД. Если ответ API пуст, то я тоже могу добавить динамические данные, которые также будут храниться в БД.

Используется массив форм и следующий мой код:

ts файл: 

orderForm: FormGroup;
items: FormArray;

ngOnInit() {

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

      this.setCheckBoxValue()
    }
    else {
      this.createBlankItem();
    }
  }

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

createBlankItem(): FormGroup {
    return this.formBuilder.group({
      checked: '',
      selected: false
    })
  }

removeDynamicCheckBox(i) {
    this.items.removeAt(i);
  }

  addDynamicCheckBox() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

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

<div [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.controls.checked.value" class="ml-a" [checked]="item.controls.selected.value">
            </mat-checkbox>
          </div>
          <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
            <mat-form-field 
            floatPlaceholder="never" class="margin-top-25px example-full-width" >
                <input 
                matInput
                class="input"
                value="{{item.controls.checked.value}}"
                >
            </mat-form-field>
          </div>
          <!-- <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
              <a href="" (click)="removeDynamicCheckBox(i)">X</a>      
          </div> -->
        </div>
      </div>
    </div>
    <div class="row">
      <button mat-raised-button (click)="addDynamicCheckBox()">Add</button>
    </div>

Я получаю то, что хочу, но в консоли я получаю эту ошибку:

ОШИБКА TypeError: Невозможно создать свойство 'validator' для строки

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

1 Ответ

0 голосов
/ 13 июня 2019

В поле ввода HTML флажка переписать директиву formControl. 

<mat-checkbox [formControl]="item" class="ml-a" [checked]="item.controls.selected.value">
            </mat-checkbox>

также в файле ts измените метод setCheckBoxValue, добавив FormControl вместо FormArray 

setCheckBoxValue() {
        this.items = this.orderForm.get('items') as FormArray;
        this.data.data.forEach((element) => {
            let control = new FormControl(true);
            this.items.push(control)
        });
    }
...