angular material disable controls using fieldset

Question

I am using angular material 7.2.0. I am trying to disable form fields using fieldset container. for input controls it works, but not for mat-select. I know I can declare it in both fieldset and mat-select and it works but I want more generic code to affect this.

sample of my code:

<fieldset disabled="true">
    <form>
      <div>
          <label>סיבת הבדיקה</label>
          <mat-form-field>
            <mat-select>
              <mat-option [value]="undefined||null"></mat-option>
              <mat-option *ngFor="let reason of reasons"
                          [value]="reason.Code"
                          [matTooltip]="reason.Desc">
                {{reason.Desc}}
              </mat-option>
            </mat-select>
            <mat-error>
              חובה להזין ערך בשדה
            </mat-error>
          </mat-form-field>
        </div>
        <div>
            <label>הערות</label>
            <mat-form-field>
              <textarea maxlength="1200"></textarea>
            </mat-form-field>
        </div>
        <div>
            <label>מבצע</label>
            <mat-form-field>
              <input matInput
                     maxlength="100" />
              <mat-error>
                חובה להזין ערך בשדה
              </mat-error>
            </mat-form-field>
          </div>
    </form>
</fieldset>

Any idea?

score 1 · Answer 1 · answered Feb 10 '19 at 15:54

1

Use CSS pointer-events property

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

<fieldset [ngStyle]="{'pointer-events':true ? 'none' : 'none' }" >
  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</fieldset>

Example:https://stackblitz.com/edit/angular-ympzvr

answered Feb 10 '19 at 15:54

Chellappan வ

23,645
3
29
60

1

Thanks for you answer. The problem is that the user can get the control focused using tab control and with keyboard can change the controls value. any other idea? – bat7 Feb 11 '19 at 10:36
for mat-select it is work but for my custom input control it does not work. – bat7 Feb 11 '19 at 12:34
for your custom input control Which one are using div or input element? – Chellappan வ Feb 11 '19 at 12:37
it does not help me because I want to apply the disable attribute to all controls in fieldset and tabindex I need to declare in each control – bat7 Feb 11 '19 at 12:48
Do not use pointer-events for this, it is not the same as disabling. It won't disable keyboard navigation. – Jonathan Aug 17 '22 at 17:21

score 0 · Answer 2 · answered Feb 12 '19 at 07:54

0

I resolved it by removing the fieldset and setting the form to disable using ngAfterContentChecked event in ts file.

see attached link how to use it.

disable form

answered Feb 12 '19 at 07:54

bat7

836
1
8
22

score 0 · Answer 3 · answered Jul 02 '22 at 06:12

Don't use fieldset [disabled] to disable angular controls. Although the controls will have a visual of a disabled controls, if there's a validation on them it will still be triggered.

You should always disable the controls and/or a control group - as they have the corresponding angular object behind them, disabling the control group will propagate the state down to the nested angular controls.

There's also a possibility to write a custom directive you can attach on any HTML element, to which every inner angular control will be registered and thus the directive could disable all those controls properly:

<fieldset [groupDisabled]="isDisabled">
   ...
</fieldset>

The code for that directive can be found here: https://gist.github.com/hidegh/f7ce58156ecc2bb4351f24b3742ed52d

angular material disable controls using fieldset

3 Answers3

Linked