angular - 向 Angular Material 禁用字段添加验证

Question

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

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

除非填充了两个字段，否则用户应该无法提交表单，因此我需要向字段 B 添加所需的验证(禁用/动态填充)。

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

<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

而不是 disabled使用 readonly .这两个属性的区别在于 disabled表单提交和 readonly 时忽略字段字段包含在提交中。不幸的是，在使用 Reactive Forms Approach 时，angular 不支持 readonly 选项，但您可以使用属性绑定(bind)轻松完成:

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