Угловые реактивные формы — вставьте FormGroup в FormArray

У меня есть FormArray, который будет содержать некоторые правила корректировки цен. Каждое правило будет содержать FormGroup и каждое FormGroup с 4 FormControls. Когда я пытаюсь вставить FormGroup в FormArray, получаю эту ошибку:

Аргумент типа «Группа форм» не может быть присвоен параметру типа «никогда».

public rules = new FormArray([]);
private getRuleFormGroup(): FormGroup {
   return this._formBuilder.group({
    from: new FormControl('', {
       nonNullable: true,
       validators: [Validators.required]
    }),
    to: new FormControl('', {
       nonNullable: true,
       validators: [Validators.required]
    }),
    increaseBy: new FormControl('', {
       nonNullable: true,
       validators: [Validators.required]
    }),
    increaseType: new FormControl('', {
       nonNullable: true,
       validators: [Validators.required]
    })
   });
}
private addNewRule(): void {
   const group = this.getRuleFormGroup();
   this.rules.push(group); //Getting error here
}

Вы получаете сообщение об ошибке в консоли или в CLI?

Jay Patel 27.12.2022 15:16

Попробуйте указать общий аргумент: public rules = new FormArray<FormGroup<any>>([])

SirOneOfMany 27.12.2022 15:17
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

пытаться:

this.rules.controls.push(group);

Точно так же, как FormGroups организуются в элементы управления, FormArrays также делают это, каждый элемент управления является либо FormGroup, либо свободным FormControl.

Вы получаете указанную ошибку, поскольку реактивные формы строго типизированы по умолчанию из Angular 14.

Чтобы решить ошибку компилятора:

  1. Создайте тип для FormGroup.

  2. Укажите тип rules как FormArray<FormGroup<RuleForm>>.

  3. Измените подпись getRuleFormGroup, чтобы вернуть тип FormGroup<RuleForm>.

interface RuleForm {
  from: FormControl<string>;
  to: FormControl<string>;
  increaseBy: FormControl<string>;
  increaseType: FormControl<string>;
}
public rules: FormArray<FormGroup<RuleForm>> = new FormArray<
    FormGroup<RuleForm>
  >([]);

private getRuleFormGroup(): FormGroup<RuleForm> {
  ...
}

Оба ответа работают. Я отмечаю ответ @GheistLycis как правильный.

RAHUL KUNDU 27.12.2022 15:46

Другие вопросы по теме