Как исправить значения в массиве реактивной формы в Angular при редактировании ввода? - PullRequest
Новая
       31

Как исправить значения в массиве реактивной формы в Angular при редактировании ввода?

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

Как пропатчить значения для нескольких входов в formArray при редактировании значений ввода, поступающих из БД? К тому же реализованы динамические входы.

- Это моя группа с formArray - 

 `  this.accountsForm = new FormGroup({
      'type_name': new FormControl('', Validators.required),
      'state': new FormControl(true, Validators.required),
      'masks': this.MaskArray,
    }); `

- это FormArray - 

`onInit() {
    this.MaskArray = new FormArray([]);
    this.MaskArray.push(
      new FormGroup({
        mask: new FormControl()
      })
    );
`

--- Это создание динамических входов 

`createItem() {
    (<FormArray>this.accountsForm.get('masks')).push(
      new FormGroup({
        mask: new FormControl()
      })
    );
  }
`

--- Здесь возникает проблема. Я пытался получить значения из БД и передать их на входы, это работало только для входов с одним значением в массиве, которое поступает из data.rows. Как передать несколько значений из data.row в маску контроллера formArray - 

`this.subs.add(this.sql.query(`Select t.Mask From Mid_s_Account_Type_Masks t Where Type_Id=${this.type_id} `).subscribe(data => {
      this.maskObj = data.rows;
      console.log(this.maskObj);
      for(var i = 0; i < this.maskObj.length ; i++){
        var j = 0;
        for(let row of this.maskObj){
          (<FormArray>this.accountsForm.controls['masks']).at(j).patchValue({
            mask: row.mask,
          });
          j++;
          console.log(row.mask);
        }
        console.log(j);
      }
    }));`

1 Ответ

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

Я пропатчил значение formArray в моем приложении с помощью метода patchModelValue, это можно сделать с помощью пакета @rxweb/reactive-form-validators.

patchModelValue обновит значение FormControl внутри FormGroup на основе предоставленного серверного объекта JSON или объекта модели. Для этого вам нужно импортировать RxFormBuilder в ваш компонент 

    export class AccountComponent implements OnInit {
    accountsForm : RxFormGroup

    constructor(
        private formBuilder: RxFormBuilder    ) { }

    ngOnInit() {
      this.accountsForm  = <RxFormGroup>this.formBuilder.group({
          masks:[
          {
            mask:''
          }]
        });
    }
 getFormArray(){
      let formarray = this.accountsForm .controls.masks as FormArray;
      return formarray.controls;
    }
    patchvalue()
    {
          this.accountsForm.patchModelValue( {
                masks: [{ mask: "xyz" }] });
    }
}

Пожалуйста, обратитесь к этому примеру: Stabblitz

...