反应形式：如何禁用对输入元素的必需属性的默认验证？

Question

我有一个带有 select 框和两个文本字段的 Angular Material 表单。
每个文本字段根据 select 框的值切换其可见性。
（如果“TYPE1”为selected，将显示“Type1 value”，如果“TYPE2”为selected，将显示“Type2 value”。）

我只想检查显示的文本字段是否为空，但我不想检查另一个。

为此，我制作了一个这样的自定义验证器并将其应用于 FormGroup 对象：

checkValidity(control: FormControl): { invalid: boolean } | null {
  const _type = control.get('type')?.value;
  if(_type === '' ){
    return { invalid: true };
  }
  if (_type === 'TYPE1' && control.get('type1_value').value == '') {
    return { invalid: true };
  } 
  else if ( _type === 'TYPE2' && control.get('type2_value').value == '') {
    return { invalid: true };
  }
  return null;
}

这有效。
但是，当我出于视觉原因将 required 属性设置为每个文本字段时，Angular 的默认验证器会检查 both 输入字段，即使其中一个不是显示。这将导致不需要的错误。

如何禁用此行为？
如果没有解决这个问题的方法，并且如果我必须从输入字段中删除 required 属性，是否有一种很好的视觉方式来告诉用户文本字段是必需的？

你可以看到我所有的代码here。谢谢。

Answer 1

由于您使用的是 Reactive Form，因此无法从模板端有条件地处理 required 。这种好处只出现在模板驱动的形式中。我能看到解决此问题的唯一方法是：

<mat-form-field>
     <mat-label>
        Type1 value <ng-container> * </ng-container>
     </mat-label>
     <input matInput formControlName="type1_value">
</mat-form-field>

您可能需要从 matInput 中删除所需的属性并使用 ng-container

添加 (*)

反应形式：如何禁用对输入元素的必需属性的默认验证？

Reactive form: How can I disable the default validation for the required attribute of an input element?

javascript

angular

angular-material

angular-reactive-forms

required