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的情况下向HTML中的FieldB添加验证吗？

Answer 1

使用disabled代替readonly。这两个属性之间的区别在于，disabled字段在表单提交时被忽略，readonly字段在提交时被包含。不幸的是，在使用“反应式表单方法”时，angular不支持只读选项，但是您可以使用属性绑定轻松地做到这一点：

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

另一个选择是在提交功能之前（提交调用之前）以编程方式启用此字段。

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

获得标记为禁用控件的值。

来自源代码注释：

/ **
  * FormGroup的总值，包括任何   禁用的控件。
  *
  *如果您想包含所有值   无论禁用状态如何，都请使用此方法。
  *否则，value属性是获取组值的最佳方法。
  * /

getRawValue（）：任意；

向“禁用角材料”字段添加验证

1 个答案: