Question

我想在表单上实现全局验证，并根据此验证更改某些输入的颜色。

我有三个领域。仅当第一个字段的值为“ test”时，才需要两个字段。

这是我实现的：

function typeValidator(form: FormGroup) {
  const type = form.controls['field1'].value;
  if (type === 'test') {
    const field2 = form.controls['field2'].value;
    const field3 = form.controls['field3'].value;
    return (!field2 || !field3) ? { requiredIf: true } : null;
  }

  return null;
}

关于HTML：

<mat-form-field color="accent">
  <mat-select formControlName="field1" placeholder="Field1">
    <mat-option value="test">Test</mat-option>
    <mat-option value="other">Other</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field color="accent">
  <mat-select formControlName="field2" placeholder="Field2">
    <mat-option *ngFor="let element of elements" [value]="element.id">{{element.name}}</mat-option>
  </mat-select>
</mat-form-field>

验证工作正常，但是当表单出现field2类型的验证错误时，我想将requiredIf的颜色更改为橙色。

感谢您的帮助。蒂埃里

Answer 1

将myFormControl.hasError('myError')作为自定义验证器添加到所需的字段。您可以通过plot "data" using 1:2 with boxes检查表单控件是否存在自定义错误，该条件可以在类语句中用于根据错误状态添加/删除类。

通过全局验证在字段上显示错误

1 个答案: