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?

Chellappan வ · Accepted Answer · 2019-02-10 15:54:01Z

2

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, 2019 at 15:54

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

5 Comments

bat7 Over a year ago

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 Over a year ago

for mat-select it is work but for my custom input control it does not work.

Chellappan வ Over a year ago

for your custom input control Which one are using div or input element?

bat7 Over a year ago

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

Jonathan Over a year ago

Do not use pointer-events for this, it is not the same as disabling. It won't disable keyboard navigation.

bat7 · Accepted Answer · 2019-02-12 07:54:13Z

1

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, 2019 at 7:54

bat7

8761 gold badge10 silver badges23 bronze badges

Comments

baHI · Accepted Answer · 2022-07-02 06:12:28Z

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

Collectives™ on Stack Overflow

angular material disable controls using fieldset

3 Answers 3

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Linked

Related