Вложенные динамически созданные входы, Форма в Angular - PullRequest
Новая
       27

Вложенные динамически созданные входы, Форма в Angular

0 голосов
/ 16 января 2020

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

компонент. html

<form [formGroup]="formulario">
<label>
    Capacidad
    <input type="text" formControlName="capacidad">
  </label>
  <label>
    Max. Casas
    <input type="text" formControlName="maxcasas">
  </label>
  <div formArrayName="pesos">
    Peso <button (click)="addPeso()">Añadir peso</button> 
    <div *ngFor="let peso of pesos.controls; let i=index">
      <label>
        Casa:
        <input type="text" [formGroupName]="i">
      </label>
      <label>
        Peso:
        <input type="text" [formGroupName]="i">
      </label>
    </div>
  </div>
</form>

компонент. ts (где fb находится в конструкторе: constructor(private fb: FormBuilder)

public formulario = this.fb.group({
    capacidad: ['24300'],
    maxcasas: ['3'],
    pesos: this.fb.array([
      this.fb.group({
        peso:   this.fb.control(''),
        nombre: this.fb.control(''),
      })
    ])   
  });
  get pesos(){

    return this.formulario.get('pesos') as FormArray;
  }

  addPeso(){
    console.log(this.formulario.get('pesos'));
    this.pesos.push(this.fb.group([]));
  }

1 Ответ

1 голос
/ 16 января 2020

При создании вложенной группы форм вы должны использовать директиву formGroupName в качестве родительского элемента для вложенных элементов управления. Затем, если вы хотите получить доступ к индивидуальному значению группы форм, используйте метод, который предоставляется FormArray API для получения указанного c значения индекса.

Попробуйте это:

компонент. html

<form [formGroup]="formulario">
<label>
    Capacidad
    <input type="text" formControlName="capacidad">
  </label>
  <label>
    Max. Casas
    <input type="text" formControlName="maxcasas">
  </label>
  <div formArrayName="pesos">
    Peso <button (click)="addPeso()">Añadir peso</button> 
    <div *ngFor="let peso of pesos.controls; let i=index"  [formGroupName]="i">
      <label>
        Casa:
        <input type="text" formControlName="peso">
      </label>
      <label>
        Peso:
        <input type="text" formControlName="nombre">
      </label>
    </div>
  </div>
</form>

component.ts 

this.formulario.get('pesos').at(0).value

Пример

...