FormArray в угловой реактивной форме не сбрасывается при отправке формы

#javascript #angular #angular-reactive-forms #angular-formbuilder

#javascript #angular #угловые реактивные формы #angular-formbuilder

Вопрос:

Я пытаюсь создать список флажков с несколькими вариантами выбора в форме с использованием реактивных форм, но сталкиваюсь с проблемой, когда FormArray, который я создаю для хранения выбранных значений флажков, не сбрасывается вместе с остальной частью формы при отправке. В результате получается массив с несколькими нулевыми значениями, соответствующими предыдущим отправкам.

соответствующий HTML-код:

 
<form [formGroup]="dieSetForm" (ngSubmit)="submitForm()" novalidate>
<label>Die Types:
        <div *ngFor="let dieType of dieTypes; let i = index">
            <label for="dieType{{dieType}}">
                <input 
                id="dieType{{dieType}}" 
                type="checkbox" name="dieType" 
                [value] = "dieType.value" 
                (change)="onCheckboxChange($event)">
                {{dieType.name}}
                </label>
        </div>
        </label>
        <input type="submit" value="Submit">
    </form>



and the relevant part of the component.ts file:



    export class CreateDieSetComponent implements OnInit {
  
  dieSetForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dieSetForm = this.fb.group({
      dieTypesCheck: this.fb.array([]),
      name: new FormControl('')
    })
  }


  dieTypes: Array<any> = [
    { name: '4', value: '4'},
    { name: '6', value: '6'},
    { name: '8', value: '8'},
    { name: '10', value: '10'},
    { name: '12', value: '12'},
    { name: '20', value: '20'}
  ];

  onCheckboxChange(e) {
    const dieTypesCheck: FormArray = this.dieSetForm.get('dieTypesCheck') as FormArray;

    if (e.target.checked) {
      dieTypesCheck.push(new FormControl(e.target.value));
    } else {
      let i: number = 0;
      dieTypesCheck.controls.forEach((item: FormControl) => {
        if (item.value == e.target.value) {
          dieTypesCheck.removeAt(i);
          return;
        }
        i  ;
      });
    }
  }

  submitForm() {
    console.log(this.dieSetForm.value.name);
    console.log(this.dieSetForm.value.dieTypesCheck);
    this.dieSetForm.reset();
  }

  ngOnInit() {
  }
}

Ответ №1:

Массивы форм необходимо очистить вручную, сброс просто сбрасывает элементы управления внутри них, вам нужно будет добавить что-то вроде:

 (this.dieSetForm.get('dieTypesCheck') as FormArray).clear();

Прямо перед вызовом reset в группе, если вы хотите также удалить все элементы управления.