Блог

Я не знаю, что искать в Google, чтобы найти ответ на мой вопрос, поэтому я спрашиваю здесь. Мне нужно создать форму с одной частью, которая всегда одинакова, есть некоторые поля ввода, которые вы можете заполнить только один раз для каждой формы. И затем есть группа полей, которые я хочу разрешить пользователю создавать несколько экземпляров. Это будет выглядеть примерно так: поле 1, поле 2, кнопка с надписью «Добавить поле 3-5», и если вы нажмете на нее, вы сможете заполнить поля 3-5, после чего вы можете либо отправить форму, либо добавить другой экземпляр полей 3-5 и так далее. Я совершенно новичок в forntend, поэтому я не знаю, есть ли для этого слово. В любом случае я был бы признателен за вашу помощь.

FormBuilder и FormArray от Angular помогут вам легко достичь этого.

вы можете определить FormArray что-то вроде a FormControl при создании своего FormGroup и перебирать его в своем пользовательском интерфейсе.

   demoForm: FormGroup;
  submitted = false;
  output =  {}

  get firstName(): FormControl {
    return this.demoForm.controls["firstName"] as FormControl;
  }
  get lastName(): FormControl {
    return this.demoForm.controls["lastName"] as FormControl;
  }
  get optionals(): FormArray {
    return this.demoForm.controls["optionals"] as FormArray;
  }

  constructor(private _formBuilder: FormBuilder) {
    this.demoForm = this._formBuilder.group({
      firstName: this._formBuilder.control('', [Validators.required]),
      lastName: this._formBuilder.control('', [Validators.required]),
      optionals: this._formBuilder.array([]),
  /*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  */
    });
  }
  

и в вашем HTML

 <form [formGroup]="demoForm">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />

    <div formArrayName="optionals">
    <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
        <div [formGroupName]="i" *ngFor="let optionals of optionals.controls; index as i;">
        <!-- ^^^^^^^^^^^^^^^^^^ -->
            <input type="text" formControlName="attr1" />
            <input type="text" formControlName="attr2" />
        </div>
    </div>
</form>

  

вы можете добавлять или удалять элементы из массива с помощью чего-то вроде этого :

   AddOptionalItems(){
     // you can add validation here on each item individually.
     const group = new FormGroup({
      attr1: new FormControl(''),
      attr2: new FormControl(''),
    });
    this.optionals.push(group);
  }

  RemoveOptionalItems(i:number){
    this.optionals.removeAt(i);
  }

  

вот небольшой stackblitz с более полной версией.

Редактировать :

полезная статья: https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a