Angular Typed Forms: How to correctly type and create dynamic fields?

Question

I have the following formgroup:

this.formBuilder.group<{
    id: number;
    nameDe?: FormControl<string>;
    nameFr?: FormControl<string>;
    nameIt?: FormControl<string>;
}>({
    id: value?.id || null
});

Focus is on the "nameXY" fields. These are added dynamically/based on conditions.

languages.forEach((lang) => { // languages can be ['De', 'Fr'] or ['Fr', 'It']
    const nameIdentifier = 'name' + lang;
    formGroup.addControl(nameIdentifier, new FormControl<string>(value?.[nameIdentifier] || '', Validators.required));
});

Now I get this error:

Argument of type 'string' is not assignable to parameter of type ...

Obviously it's because nameIdentifier is only a string and not 'nameDe' | 'nameFr'| 'nameIt'.

The first approach I tried was to explicitely define the type for nameIdentifier:

const nameIdentifier: 'nameDe' | 'nameFr' | 'nameIt' = 'name' + lang;

Then I get this error:

Type 'string' is not assignable to type '"nameDe" | "nameFr" | "nameIt"'.ts(2322)

Now I'm out of ideas. :) Are there any clean approaches without having to use tons of explicit typing?

Chellappan வ · Accepted Answer · 2022-08-04 07:23:01Z

1

Try type assertion using as keyword.

const nameIdentifier = ('name' + lang) as 'nameDe' | 'nameFr' | 'nameIt';

Or

you can use FormRecord

edited Aug 4, 2022 at 7:23

answered Aug 4, 2022 at 7:03

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

2 Comments

sandrooco Over a year ago

This "mutes" the error but doesn't add to type safety, right?

Chellappan வ Over a year ago

Yes for dynamic field it is index typed.

Collectives™ on Stack Overflow

Angular Typed Forms: How to correctly type and create dynamic fields?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related