Как установить значение в виде массива с помощью Angular

Я хочу установить значение в массиве следующим образом:

this.form.controls[name].setValue('name')

но я работаю с формами массива, и это не работает, даже если я передаю индекс массива явно

например, это мой массив форм, и я хочу установить значение в функции

user: FormGroup;
users: FormGroup;

constructor(private fb: FormBuilder) {}
ngOnInit() {
  this.user = this.buildGroup();
  this.users = this.fb.group({
    data: this.fb.array([this.user])
  });
}
get fData() {
  return this.users.get('data') as FormArray;
}
buildGroup() {
  return this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}
setValue(index) {
  // This doesn't work
  this.fData[index].controls[name].setValue('name')
}
onSubmit() {
  this.fData.push(this.buildGroup());
  const {valid, value} = this.fData;
  console.log(valid, value);
}

angular angular-reactive-forms
person LLaza    schedule 08.07.2017    source источник
comment
Отбросьте мой предыдущий ответ. Проблема, скорее всего, в том, что вы не передаете массив в setValue.   -  person Tom    schedule 08.07.2017
comment
Не следует ли передавать индекс, в конкретную форму массива? Я пытаюсь это сделать, но это не работает setValue (index) {this.fData.setValue (['Name']); } Ошибка говорит, что необходимо предоставить значение для элемента управления fom с именем 'name'   -  person LLaza    schedule 08.07.2017
comment
Попробуйте это: this.fData[index].controls['name'].setValue(['name'])   -  person Tom    schedule 08.07.2017
comment
не работает: не удается прочитать элементы управления свойством undefined   -  person LLaza    schedule 08.07.2017

Ответы (3)


arrow_upward
27
arrow_downward

Для массивов нужно использовать setControl. Что-то вроде этого:

    this.productForm = this.fb.group({
        productName: ['', [Validators.required,
                           Validators.minLength(3),
                           Validators.maxLength(50)]],
        productCode: ['', Validators.required],
        starRating: ['', NumberValidators.range(1, 5)],
        tags: this.fb.array([]),
        description: ''
    });

    ...

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));
person DeborahK    schedule 08.07.2017
comment
Я, должно быть, пропустил это в вашем курсе множественного числа ;-) - person Tom; 08.07.2017
comment
Нашел: app.pluralsight.com/ - person Tom; 08.07.2017
comment
Курс Angular: Reactive Forms? Надеюсь, это было полезно! - person DeborahK; 08.07.2017
comment
РЖУ НЕ МОГУ! Желаю, чтобы мы могли добавлять смайлики в комментарии! - person DeborahK; 08.07.2017
comment
Как я могу просмотреть этот массив в html? - person codejunkie; 09.11.2017
comment
это также прямо здесь angular.io/guide/reactive-forms, просто найдите setControl - person nescafe; 06.04.2018
comment
@DeborahK Как мы можем добавить несколько групп formGroups в formArray вот так? Если наш template имеет [formGroupName]="index", отличный от [formControlName]="index", этот подход дает эту ошибку ERROR Ошибка: не удается найти элемент управления с путем: 'адреса - ›0 -› addressType'. какие-либо предложения? - person Sanira; 03.07.2019
comment
Большое спасибо!!!! Я использовал control.push (), но control.setControl () был именно тем, что мне было нужно !! - person Tyron; 31.08.2019

arrow_upward
7
arrow_downward

Вот что я сделал, чтобы вручную установить значение в конкретном элементе управления формы formArray, и сработал для меня. У меня formArray имя bundleDetails.

   this.formBuilderObj['bundleDetails'] = 
   this.formBuilder.array([this.createBundleItem()]);

    createBundleItem(): FormGroup {
    return this.formBuilder.group({
     bsku: ['', Validators.required],
     bqty: ['', Validators.required],
     bprice: ['', Validators.required]
    });
   }

Метод установки значения элемента управления bsku (где индекс [formGroupName]="i" передан из html файла).

   setSku(sku: string, index: number) {
   const faControl = 
   (<FormArray>this.pmForm.controls['bundleDetails']).at(index);
   faControl['controls'].bsku.setValue(sku);
  }

Надеюсь это поможет. Удачного кодирования.

person Nirali    schedule 08.03.2018
comment
Отлично, это отлично работает, и я считаю, что это ответ на вопрос об установке значения элемента управления по определенному индексу, а не значения всего массива ... - person Alfa Bravo; 23.02.2019

arrow_upward
0
arrow_downward

Если вы получаете сообщение об ошибке «ERROR Error: Cannot find control with path: 'addresses -> 0 -> addressType'» или что-то подобное, это, скорее всего, вызвано тем, что вы передаете значения, но ваш шаблон html ожидает значения вместе с именем элемента управления.

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

См. Код ниже:

var tagsArray = [];
this.product.tags.forEach(product => tagsArray.push(this.fb.group({tag: [product.tag, [Validators.required]]})));
this.productForm.setControl('tags', this.fb.array(tagsArray || []));

Имеется в виду так:

<div class="tag" *ngFor="let t of tags.controls; let i = index" [formGroupName]="i" class="mb-2">
      <input type="text" formControlName="tag" placeholder="Tag name" class="primary_input">
       <button mat-icon-button (click)="deleteTag(i)">
           <mat-icon>clear</mat-icon>
       </button>
 </div>

Это позволяет загружать предыдущие результаты, позволяя добавлять дополнительные значения и проверять вводимые пользователем данные.

Надеюсь это поможет.

person user3640687    schedule 23.11.2019