hello,
i am not sure if i am trying to do something the wrong way, but here is my problem:
I have a form, which shows three different ion-select items.
the content of these items is interconnected, so I would only have the second and third one be enabled, when the first one has been selected.
I did this with [disabled]=“selectItemsOneDisabled”
but when adding that control to a formgroup i get the warning:
It looks like you’re using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid ‘changed after checked’ errors.
what would be solving my issue?
Try disabling the backing FormControl in the controller instead of doing it in the template.
thanks.
but how do i adress the controller?
I don’t know what “adress the controller” means, but here’s the documentation for AbstractControl, which includes a disabled attribute.
The controller is the TypeScript file. Good rule of thumb: do all your computation in the TypeScript file, and only use the template to render already-computed information. That way, you avoid unexpected overhead, like the template holding onto information when you think it’s already released.
ah, now i got it …
i tried this.form.controls.items.disable=false;
where it should be this.form.controls.items.enable(true);
No, don’t access form.controls directly. That’s a bad habit that will bite you when you try to do it from a template. Use get() instead.
oh. You mean:
this.form.get(item);
?
Why is this better, if you dont mind some explaining?
Thanks!
The primary reason is that it will work anywhere (i.e. in templates as well):
<div *ngIf="form.get('items').enabled">
This, OTOH, will work under JIT (dev) mode, but choke on you in AoT (prod) mode with a mysterious error about properties not existing on type '{ [key: string]: AbstractControl; }':
<div *ngIf="form.controls.items.enabled">
ah! thank you! That explaines a lot.