FormArray множественный получить данные на onSubmitForm ionic - PullRequest
Новая
       18

FormArray множественный получить данные на onSubmitForm ionic

0 голосов
/ 26 октября 2018

Я создал форму с 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

1 Ответ

0 голосов
/ 26 октября 2018

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

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 для вашей ссылки.

...