FormArray несколько получить данные onSubmitForm ionic

Я создал форму с помощью formBuilder

    this.authForm = this.formBuilder.group({
      diagnostic: ['', Validators.required],
      produit:['',Validators.required],
      pieces: this.formBuilder.array([]),
      ramassage:'',
      main:''
    });
get getPiecesArray() {
    return this.authForm.get('pieces') as FormArray;
  }

  addPiece() {

    const piece = this.formBuilder.group({
      piece: [],
      prix: [],
    })

    this.getPiecesArray.push(piece);
  }

  deletePiece(i) {
    this.getPiecesArray.removeAt(i)
  }

в моем HTML у меня есть

<div formArrayName="pieces">
        <ion-item *ngFor="let piece of getPiecesArray.controls; let i=index" [formGroupName]="i">
            <ion-icon  item-end color="danger" name="trash"  (click)="deletePiece(i)"></ion-icon>
          <ion-item>
            <ion-input full placeholder="Piéce" formControlName="piece"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input placeholder="Prix" formControlName="prix"></ion-input>
          </ion-item>
        </ion-item>
      </div>

Но когда я хочу получить от onSubmitForm ()

  console.log(this.getPiecesArray().controls);
for (let control of this.getPiecesArray().controls) {
  pieces = pieces + " " + control.value;
}

У меня эта ошибка. Невозможно вызвать выражение, тип которого не имеет сигнатуры вызова. Тип FormArray не имеет совместимых сигнатур вызовов.

Как я могу поместить все данные в formBuilder.array


ionic-framework angular formbuilder
person Ruydo    schedule 26.10.2018    source источник
comment
Что, если вы передадите части как переменную, а не строку? вернуть this.authForm.get (части) как FormArray;   -  person LazioTibijczyk    schedule 26.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

getPiecesArray массив - это getter, а не метод. Так что это должно называться так:

console.log(this.getPiecesArray.controls);
for (let control of this.getPiecesArray.controls) {
  pieces = pieces + " " + control.value;
}

Но если вы хотите получить значение всех элементов управления, вы можете просто сделать this.authForm.value. Если вам нужна только стоимость штук, вы можете сделать this.authForm.value.pieces

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

authForm: FormGroup;

constructor(
  public navCtrl: NavController,
  private formBuilder: FormBuilder
) {
  this.authForm = this.formBuilder.group({
    diagnostic: ['', Validators.required],
    produit: ['', Validators.required],
    pieces: this.formBuilder.array([]),
    ramassage: '',
    main: ''
  });
}

addPiece() {
  const piece = this.formBuilder.group({
    piece: [],
    prix: [],
  });
  this.getPiecesArray.push(piece);
  console.log('After Add: ', this.authForm.value);
}

onSubmitForm() {
  console.log(this.authForm.value);
}

deletePiece(i) {
  this.getPiecesArray.removeAt(i);
}

get getPiecesArray() {
  return ( < FormArray > this.authForm.get('pieces'));
}

И в шаблоне:

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

  <form [formGroup]="authForm" (submit)="onSubmitForm()">
    <button type="button" (click)="addPiece()">Add Piece</button>
    <div formArrayName="pieces">
      <ion-item 
        *ngFor="let piece of getPiecesArray.controls; let i=index" 
        [formGroupName]="i">
        <ion-icon 
          item-end 
          color="danger" 
          name="trash" 
          (click)="deletePiece(i)">
        </ion-icon>
        <ion-item>
          <ion-input 
            full 
            placeholder="Piéce" 
            formControlName="piece">
          </ion-input>
        </ion-item>
        <ion-item>
          <ion-input placeholder="Prix" formControlName="prix"></ion-input>
        </ion-item>
      </ion-item>
    </div>
    <button>Submit</button>
  </form>
</ion-content>

Вот образец StackBlitz для вашего исх.

person SiddAjmera    schedule 26.10.2018