как динамически добавить группу управления формой в angular

Я новичок в angular, и я добавляю некоторые поля, используя элементы управления формы, исходя из своих требований. Мне нужно динамически добавить несколько полей, содержащих массив. Но я не знаю, как показать пользователю такую ​​функциональность в пользовательском интерфейсе. Пожалуйста, помогите достичь этого. Вот пример JSON

{
  "city": "hyderabad",
  "comboDesciption": "ioioioyio",
  "label": "combo", 
  "price": 650,
  "productIds": "Mutton Liver,Chicken",
  "qtyIds": "500gm,700gm"
}

В приведенном выше JSON у меня есть productId, где мне нужно выбрать несколько продуктов для комбинации, и их соответствующие веса количества указаны в qtyIds. Пожалуйста, предложите мне, как добавить мою группу управления формой в массив для достижения этой цели.


angular angular-forms form-control angular-formbuilder
person sandeep v    schedule 08.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не уверен, правильно ли я вас понял.

Вот как вы можете использовать реактивные формы в вашем случае:

myForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
 this.myForm = this.fb.group({
   city: [null, Validators.required),
   comboDescription: [null, Validators.required),
   label: [null, Validators.required),
   price: [null, [Validators.required, Validators.min(1)]),
   productsIds: this.fb.array([], Validators.required),
   qtyIds: this.fb.array([], Validators.required)
 })
}

// create getters to retrieve the form array controls from the parent form group
public get productsIds(): FormArray {
  return this.myForm.get('productsIds') as FormArray;
}

public get qtyIds(): FormArray {
  return this.myForm.get('qtyIds') as FormArray;
}

// create methods for adding and removing productsIds
public addProduct(): void {
  this.productsIds.push(this.fb.control('', [Validators.required]));
}

public removeProduct(index: number): void {
  if(this.productsIds.length < 1) {
   return;
 }

  this.productsIds.removeAt(index);
}

// do the same for the qtyIds

В шаблоне:

<form [formGroup]="myForm">
  .
  .
  .
  // example for productsIds
  <div formArrayName="productsIds">
    <button (click)="addProducts()">Add Product</button>

    <div *ngFor="let productId of productsIds.controls; index as i">
      <input type="text" [formControlName]="i">
      <button (click)="removeProduct(i)">Remove Product</button>
    </div>
  </div>
  .
  .
  .
</form>
person ionut-t    schedule 08.05.2020
comment
Здесь мне нужно добавить два типа добавления и удаления, один для productId, а другой для весов количества. Есть ли другой простой способ? Я могу это решить. Чтобы в UI пользователь не запутался - person sandeep v; 09.05.2020
comment
Насколько я понял, вам нужны массивы для обоих полей. Так что да, вам нужно обрабатывать оба случая. Конечно, вы можете создавать вспомогательные методы, если не хотите повторяться. - person ionut-t; 09.05.2020