How to correctly use types with FormArray in Angular

Question

How should I declare this type ?

Let say I've a FormGroup

I instantize it in the constructor.

export interface MyType {
 myValue: string
}

myForm: FormGroup
myArray: FormArray // <FormControl<MyType>>

constructor(private _formBuilder: FormBuilder) {
  myForm = new FormGroup({
    myArray: this._formBuilder.array([])
  })
}

Because I have somewhere a button that let me add a new element to the array, I do as follow

addElement() {
  this.myArray = this.myForm.get('myArray') as unknown as FormArray

  this.myArray.push(this.newElement())
}

private _newElement(): FormGroup { // What type to use ? 
  return this._formBuilder.group({
     myValue: ''
  })
}

But when I do use the

myArray: FormArray<FormControl<MyType>>

I get the following error

Argument of type 'FormGroup<any>' is not assignable to parameter of type 'FormControl<MyType>'.
  Type 'FormGroup<any>' is missing the following properties from type 'FormControl<MyType>': defaultValue, registerOnChange, registerOnDisabledChange

Somebody knows

which type I should here private _newElement(): FormGroup { // What type to use ?
or
Is this correct myArray: FormArray<FormControl<MyType>>? -> FormGroup<FormControl<MyType>> being incorrect

Having the same issu,e not much documentation on it out there — Wil Ferraciolli
– Wil Ferraciolli, Commented Jul 8, 2023 at 8:18

Yong Shun · Accepted Answer · 2023-02-22 10:18:19Z

6

Declare the interface/class for the Typed Form.

export class MyTypeForm {
  myValue: FormControl<string>;
}

Declare myArray type as FormArray<FormGroup<MyTypeForm>>.

myArray: FormArray<FormGroup<MyTypeForm>>;

The _newElement method to return FormGroup<MyTypeForm> type.

private _newElement(): FormGroup<MyTypeForm> {
  return this._formBuilder.group<MyTypeForm>({
    myValue: this._formBuilder.control(''),
  });
}

Demo @ StackBlitz

Reference: Angular Strictly Typed Forms (Complete Guide)

answered Feb 22, 2023 at 10:18

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raphaël Balet Over a year ago

Thx, just a little question, but the MyType interface does already exists and I will like to use it directly instead of having to recreated a new class. Is this possible or is your answer the only way?

Edmunds Folkmanis Over a year ago

You can create generic interface that defines each property as FormControl like export type FormControlType<T> = {[key in keyof T]: FormControl<T[key]>}. But it's not always usable, i.e. if some property is object, it will define FormControl with object as value (and it's OK), but maybe you wanted nested FormGroup instead.

Yong Shun Over a year ago

Hi @RaphaëlBalet, I think that it is needed to create another interface specified for the FormGroup, not possible to use MyType interface in FormGroup as the compiler will complain the error. I think Edmunds' comment is useful as what he mentioned.

Casey Plummer · Accepted Answer · 2024-02-12 14:10:23Z

2

You can also do it via inference without declaring extra types. For clarity, I'm using functions to instantiate a new form, but it could be done inline as well.

Your component:

export class MyComponent {
  form = this.newForm();

  constructor(
    private readonly fb: NonNullableFormBuilder,
  ) {}

The dateRanges field is a FormArray. The empty array passed to fb.array() is strongly-typed using a mapping function:

  newForm() {
    return this.fb.group({
      year: this.fb.control({ value: this.current?.year ?? 2022, disabled: true }, [Validators.required]),
      active: [this.current?.active, [Validators.required]],
      dateRanges: this.fb.array([].map(this.newDateRangesForm)),
    });
  }

The mapping function for each item in the FormArray:

  newDateRangesForm(range: DateRange) {
    return this.fb.group({
      startDate: [range.startDate, [Validators.required]],
      endDate: [range.endDate, [Validators.required]],
    });
  }

Which yields a strongly typed form value:

const formValue = this.form.getRawValue();

edited Feb 12, 2024 at 14:10

answered Jan 17, 2024 at 18:52

Casey Plummer

3,1681 gold badge26 silver badges25 bronze badges

1 Comment

Raphaël Balet Over a year ago

I won't have time to implement it, but it looks like a really good solution, can someboy test it out and tell me if this should be the accepted answer ?

Collectives™ on Stack Overflow

How to correctly use types with FormArray in Angular

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related