What is the equivalent of control.disable in case of QueryList in angular

Question

I need to disable some fields based on my angular form. I am trying to disable the DOM elements in component class because many html tags are customized and so disabled attribute cannot be used there. The way I am doing this is using @ViewChild/@ViewChildren in my component and disabling in ngAfterViewInit(). I am not able to disable the elements which are inside ngIf in html. Below is the code: Html:

<div *ngIf="displayAdvOpt">
        <div class="card-title">Rules</div>
        <abc-select-field
          #rule
          width="100%"
          label=" "
          formControlName="_rules"
          [options]="rules"
        ></abc-select-field>
<div>

Component class:

@ViewChildren('rule') ruleSelect;

When logging ruleSelect in component class, it shows that is a QueryList and not a FormControl, as is the case for the elements not inside ngIf. Due to this, I am not able to do ruleSelect.control.disable() to make it disabled in html. I am doing these in ngAfterViewInit(). Please let me know how can I disable a QueryLst or if there is any other way.

score 1 · Accepted Answer · answered Feb 02 '22 at 21:19

@Abhinash, you can not acces to any element if is not in the screen. As you has the element under a *ngIf you need condition becomes true and "after Angular repaint", enable/disable... so, in general

this.condition=true;
setTimeout(()=>{
   this.ruleSelect.....
})

But your abc-select-field, has a FormControl in any way and the FormControl exist even the abc-select-field is not in screen, so if you makes that the elements are disabled depending if the control is disabled

Juan Vicente Berzosa Tejero · Answer 2 · 2022-02-02T19:49:31.253

0

In order to disable the select field, you don't need to know neither that 'distinction' (QueryList/Control) nor a 'local reference' (#rule) :

Simply, in the code you want to disable, you just need to do this:

this.form.get('_rules').disable();
// or this.form.constrols['_rules'].disable();

Similarly, when you want to re-enable it you can use:

this.form.get('_rules').enable();

edited Feb 02 '22 at 19:49

answered Feb 02 '22 at 16:49

Juan Vicente Berzosa Tejero

2,786
2
5
15

I already tried this option but it was not working. Sorry to not mention in the question. – Abhinash Jha Feb 02 '22 at 17:30
" – Juan Vicente Berzosa Tejero Feb 02 '22 at 17:48
yes, its a customized component provided by the client. – Abhinash Jha Feb 02 '22 at 18:43
Can you bind it a property [disabled], and bind to it a boolean (example, – Juan Vicente Berzosa Tejero Feb 02 '22 at 19:04
is complicated to edit the component and release for us to use. thats why, I had to take the option for ViewChild. Also, if is not inside an ngIf, then I am able to disable it using @ViewChild. – Abhinash Jha Feb 02 '22 at 19:36

score 0 · Answer 3 · answered Feb 02 '22 at 21:10

Below is the workaround I tried.

<div *ngIf="displayAdvOpt">
            <div class="card-title">Rules</div>
            <abc-select-field
              #rule
              width="100%"
              label=" "
              formControlName="_rules"
              [options]="rules"
              on-mouseover="isDisabled()"
            ></abc-select-field>
    <div>

In component class:

@ViewChild('rule') ruleSelect;
isDisabled() {
    if (this.showChanges){
      this.ruleSelect.control.disable();
    }

I see that in ngAfterViewInit(), ruleSelect is a QueryList but in isDisabled() the method called after on-mousehover, it is coming as AbcSelectFieldComponent and so I can call .control.disable() on it. The only reason I can think of is this- https://stackoverflow.com/a/55610325/4464806 Anymore suggestions are welcome!!

What is the equivalent of control.disable in case of QueryList in angular

3 Answers3