Disabled value is not rendering

Question

Setting disabled attribute by template works correctly, but the console shows this warning:

<... ... name="Province" id="name="Province" formControlName="Province" [disabled]="this.listValues.length==0">

So, my solution coming through code it in the back (.ts file):

  this.listValues= regions;
  if (this.listValues.length === 0) {
    this.registerForm.get('Province').disable();
  } else {
    this.registerForm.get('Province').enable();
  }

Debugging the code I can confirm that the control (Province) is changing its state from disabled to enabled and so on, but the html is not rendering this values/changes.

Also tried:

<... ... name="Province" id="name="Province" formControlName="Province" [attr.disabled]="this.listValues.length==0">

and:

...
this.registerForm = this.formBuilder.group({
      Province: [{ value: '', disabled: this.listValues.length===0}, null],
....

or:

  this.listValues= regions;
  if (this.listValues.length === 0) {
    this.registerForm.controls['Province'].disable();
  } else {
    this.registerForm.controls['Province'].enable();
  }

Thanks in advance....

Piece of cake... It works... Thanks so much... Dont you want to post an answer for rewarding your efford? :) — Kenzo_Gilead, May 24 '19 at 11:16
Nah man, thank you for the offer, but it's simply a typo on your side (I think this line is in the doc). You can juste close your question, don't worry ! — , May 24 '19 at 11:16
Well if that bothers you so much, post an answer yourself, I don't mind ! — , May 24 '19 at 11:27
Ok, hoping your solution helps others after posting my answer. More legible. Thanks mate. — Kenzo_Gilead, May 24 '19 at 12:11
You can also use a directive to enable/disabled an input when you're using ReactiveForm https://stackoverflow.com/questions/47937639/how-to-make-a-disabled-reactive-form-editable-in-angular2 — Eliseo, May 24 '19 at 12:12
@Eliseo I tried it. You can check it in my post and it is not working.... Thanks for your answer.... :) — Kenzo_Gilead, May 24 '19 at 12:14
https://stackblitz.com/edit/angular-jfygpt?file=src%2Fapp%2Fapp.component.html — Eliseo, May 24 '19 at 12:23

score 1 · Accepted Answer · answered May 24 '19 at 12:14

Posting solution after @trichetriche help. Hoping it helps others as it helps me.

HTML

....
<... ... name="Province" id="name="Province" formControlName="Province" [disabled]="registerForm.get('Province').disabled">

TS

.....
      this.listValues= regions;
      if (this.listValues.length === 0) {
        this.registerForm.get('Province').disable();
      } else {
        this.registerForm.get('Province').enable();
      }

score 0 · Answer 2 · answered May 24 '19 at 12:29

0

[disabled]="boolean" (true or false)

[disabled]="listValues.length == 0 ? true : false"

answered May 24 '19 at 12:29

Julien Rousset

11
2

Not working properly... As far as I am using reactive forms, warning appears... You can check it in the image added in my post. Cheers mate. – Kenzo_Gilead May 24 '19 at 12:33

Disabled value is not rendering

2 Answers2