Вставка новой FormGroup в FormArray помечает динамическую FormGroup как недействительную - PullRequest
Новая
       21

Вставка новой FormGroup в FormArray помечает динамическую FormGroup как недействительную

0 голосов
/ 19 ноября 2018

Я не уверен, является ли это ошибкой, почти на 90% уверен, что это не так, но я хочу знать логику чего-то подобного.

У меня есть компонент, где, скажем, я инициализирую FormGroup при инициализации компонента. 

export class FooComponent implements OnInit {
  form!: FormGroup;
  foos!: FormArray;
  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      foos: this.fb.array([]),
    });
  }

  createFoo(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      details: ['', Validators.required]
    });
  }

  addFoo(): void {
    this.foos = this.form.get('foos') as FormArray;
    this.foos.push(this.createFoo());
  }
}

Скажем, функция addFoo() вызывается при нажатии кнопки (как в моем текущем приложении). Почему недавно нажата FormGroup помечена как pristine, но invalid? Даже если для этого есть веская причина, не следует ли предполагать, что если мы динамически генерируем новый FormGroup с валидаторами, его следует считать действительным при создании или push? Это можно обойти? Я не хочу, чтобы мои пользователи нажимали кнопку, чтобы сгенерировать новую группу полей для заполнения, которые уже помечены как недействительные, если они сами ничего не сделали для этих полей. Это ошибка? Я не чувствую, что моя реализация неверна, так как я следовал документации Angular Material для этого. Я попытался установить Validators.required вручную после того, как новый foo вставлен в FormArray, но это дает тот же результат.

Какие-либо мнения и / или советы?

1 Ответ

0 голосов
/ 19 ноября 2018

Для вашего вопроса вот ответ.

В исходном состоянии ваш this.form действителен

, затем createFoo () создает formGroup, который недопустим из-за пустого значения, предоставленного с требуемымvalidator.

Когда вы пытаетесь выдвинуть недопустимый formGroup в действительный массив formGroup, тогда this.form становится недействительным.

Если вы хотите, чтобы valid был нажатием, попробуйте добавить значение или удалить требуемый валидатор

Для REF:

FormBuilder создает группу с formControl следующим образом 

new FormControl(value: any, validator: Validators);
...