Angular using disable form control typed forms

Question

I'm updating all my angular forms to typed forms. I define it like follows:

readonly personForm: FormGroup<{
    name: FormControl<string>
    favorites: FormControl<string[] | null>
}>;

And I initialize it like:

this.personForm = this.fb.group({
    name: this.fb.nonNullable.control("", Validators.required),
    favorites: new FormControl({ value: [""], disabled: false})
});

Somewhere in the code I'm resetting the form once I get the data from the API. The "favorites" is a select from a list from another API method, let's call it food. If this food list is empty, then

this.personForm.reset({
    name: person.name,
    favorites: {
        value: person.favorites || [],
        disabled: this.food && this.food.length < 1
    }
});

Where person is the constant which contains my API data response.

On this favorites assignation I get a TS error:

So I'm guessing the way I'm defining the FormControl it's not correct at all. How do I have to define it?

Well, it seems like you try to assign an object with attributes value and disabled to your form control value of type string[]. Maybe you wanted to assign this value attribute to your form control (using setValue) and your disabled attribute to the form accordingly. — Fabian Strathaus
– Fabian Strathaus, Commented Sep 23, 2022 at 11:30
But with the UntypedFormGroup I have no problems. How should the definition be then? — Esteban Chornet
– Esteban Chornet, Commented Sep 23, 2022 at 11:33
Can you also provide the code where you try to assign the value to your formControl? Best would be a StackBlitz example containing all provided code. — Fabian Strathaus
– Fabian Strathaus, Commented Sep 23, 2022 at 11:37
Usually, by the Angular documentation, you create FormControl or FormGroup instances only once in the constructor or ngOnInit, unless form is dynamic by design (form fields will be added or removed in runtime). If just value of the form should be changed there is methods reset(), setValue() and patchValue(). — Edmunds Folkmanis
– Edmunds Folkmanis, Commented Sep 23, 2022 at 11:44
But I'm reseting the whole form once I get the data loaded, on the ngOnInit. Let me update the code a bit. I have more fields, not just 2. But the only problem I get is with the disabled. — Esteban Chornet
– Esteban Chornet, Commented Sep 23, 2022 at 11:45

MGX · Accepted Answer · 2022-09-23 13:16:56Z

2

As a side note :

If you use the form builder, you only need it on group
If you have a required validator, you don't need the nonNullable option

Your code can then become :

this.personForm = this.fb.group({
    name: ['', [Validators.required]],
    favorites: ''
});

Then, if you implement the solution, you can make it more concise too :

this.personForm.patchValue({
    name: person.name,
    favorites: person.favorites ?? []
});
if (!this.food?.length) this.personForm.get('favorites').disable();

answered Sep 23, 2022 at 13:16

MGX

3,5415 silver badges19 bronze badges

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

Comments

Anton Marinenko · Accepted Answer · 2022-09-23 11:50:49Z

0

You have to patch your control value with it's type:

  favorites: person.favorites || []

And then check if it should be disabled:

const favoritesControl = this.personForm.controls.favorites;

if (this.food && this.food.length < 1 && favoritesControl.enabled) {
  favoritesControl.disable();
}

P.s. your code works with UntypedFormControl because of wrong value assigned. In your reset function:

favorites: {
        value: person.favorites || [],
        disabled: this.food && this.food.length < 1
    }

assigns object value with props. And actually it will not be disabled even if the same prop disabled is true. And now your control have not a string array value, but object.

answered Sep 23, 2022 at 11:50

Anton Marinenko

3,1401 gold badge12 silver badges17 bronze badges

1 Comment

Esteban Chornet Over a year ago

So with your proposal it works, but I don't really understand how it used to work without being typed and now it doesn't eventhough disabled & value are props of a FormControl. That's why I think there's something wrong in the FormControl definition.

Collectives™ on Stack Overflow

Angular using disable form control typed forms

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related