使用字段集的角度材料禁用控件答案

【问题标题】：angular material disable controls using fieldset使用字段集的角度材料禁用控件
【发布时间】：2019-02-12 15:54:13
【问题描述】：

我正在使用angular material 7.2.0。我正在尝试使用 fieldset 容器禁用表单字段。对于输入控件，它可以工作，但不适用于mat-select。我知道我可以在 fieldset 和 mat-select 中声明它并且它可以工作，但我想要更多通用代码来影响这一点。

我的代码示例：

<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>

有什么想法吗？

【问题讨论】：

标签： angular angular-material disabled-control

【解决方案1】：

使用 CSS 指针事件属性

pointer-events CSS 属性在什么情况下设置（如果有）特定的图形元素可以成为指针事件的目标。

<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>

例如：https://stackblitz.com/edit/angular-ympzvr

【讨论】：

感谢您的回答。问题是用户可以使用选项卡控件获得控件的焦点，并且使用键盘可以更改控件值。还有其他想法吗？
对于 mat-select 它是有效的，但对于我的自定义输入控件它不起作用。
为你的自定义输入控件使用的是div还是input元素？
它对我没有帮助，因为我想将禁用属性应用于我需要在每个控件中声明的字段集和 tabindex 中的所有控件

【解决方案2】：

我通过删除字段集并将表单设置为禁用在 ts 文件中使用 ngAfterContentChecked 事件来解决它。

查看附加链接如何使用它。

disable form

【讨论】：