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 2 · Answer 1 · answered Feb 10 '19 at 15:54

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 '19 at 15:54

Chellappan வ

18,942
3
21
52

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

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

796
1
7
22

angular material disable controls using fieldset

2 Answers2