web-dev-qa-db-fra.com

Tableau de nombres sous formes réactives, Angular 6?

Je sais que nous pouvons ajouter un tableau d'objet à FormGroup avec FormArray comme suit:
https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

ngOnInit() {
  this.orderForm = this.formBuilder.group({
    customerName: '',
    email: '',
    items: this.formBuilder.array([ this.createItem() ])
  });
}

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    description: '',
    price: ''
  });
}

addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.Push(this.createItem());
}

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>

Mais je veux avoir un tableau de nombre non objet.
Comment pouvons-nous le faire dans Angular 6. *?
Comment pouvons-nous ajouter ou supprimer un élément de numéro?

angularangular6angular-reactive-formsreactive-formsformarray
2
Mohammad Dayyan

Vous pouvez passer n'importe quel contrôle de formulaire à la place d'un groupe de formulaires dans le tableau de formulaire:

new FormGroup({
  // ...
  items: new FormArray([new FormControl(123)]),
});

Commandes possibles livrées avec angular: FormGroup, FormArray, FormControl.

FormBuilder (que je trouve personnellement obsolète, juste un avis) crée simplement ces objets pour vous. Si vous voulez rester avec elle, essayez 

items: this.formBuilder.array([123])

Ajouter et supprimer un article:

private addItem(value: number) {
    this.itemsFormArray.Push(new FormControl(value));
}
private removeItem(value: number) {
    let index = this.itemsFormArray.controls.findIndex(control => { 
        return control.value == value;
    });
    this.itemsFormArray.removeAt(index);
}
private get itemsFormArray(): FormArray {
    return this.formGroup.get('items') as FormArray;
};
3
smnbbrv