向 Angular material 禁用字段添加验证

Question

简化的场景是在我的表单上有两个字段 - A 和 B。

字段 A 为必填项并已启用。字段 B 也是必需的，但由于在字段 A 中键入数据而被禁用且仅（动态）填充，并且在某些情况下 B 可能会被解析为 NULL。

除非两个字段都已填充，否则用户应该无法提交表单，因此我需要向字段 B 添加必需的验证（disabled/dynamically 已填充）。

虽然必需的验证对于启用的字段工作正常，但对于禁用的字段似乎被忽略了。

<mat-form-field>
  <input name="FieldA" matInput formControlName="FieldA" placeholder="Field A" [maxLength]="6">
  <mat-error *ngIf="formErrors.FieldA">{{ formErrors.FieldA }}</mat-error>
</mat-form-field>

<mat-form-field>
  <input name="FieldB" matInput formControlName="FieldB" placeholder="Field B">
  <mat-error *ngIf="formErrors.FieldB">{{ formErrors.FieldB }}</mat-error>
</mat-form-field>


buildForm() {
  this.form = this.form.group({
      FieldA: ['', [Validators.required]],
      FieldB: [{ value: '', disabled: true }, [Validators.required]],
  });

有什么方法可以在不启用的情况下向 HTML 中的 FielDB 添加验证？

Answer 1

使用 readonly 而不是 disabled。这两个属性之间的区别在于 disabled 字段在表单提交时被忽略，而 readonly 字段在提交时被包含。不幸的是 angular 在使用 Reactive Forms Approach 时不支持只读选项，但是你可以使用属性绑定轻松地做到这一点：

<input type="text" formContolName="FieldB" [readonly]="isReadonly">

另一种选择是在提交函数时（在提交调用之前）以编程方式启用此字段。

编辑：您还可以通过调用 this.form.getRawValue();

来获取标记为禁用控件的值

来自源码评论：

/**
* The aggregate value of the FormGroup, including any disabled controls.
*
* If you'd like to include all values regardless of disabled status, use this method.
* Otherwise, the value property is the best way to get the value of the group.
*/

getRawValue(): any;

向 Angular material 禁用字段添加验证

Add validation to Angular material disabled field

validation

disabled-input

angular-material

angular