如何在 Angular14 中使用 angular material input 创建带有验证的自定义输入组件?

How to create custom input component with validation using angular material inputin Angular14?

提问人:Gradin98 提问时间:8/4/2023 更新时间:8/4/2023 访问量:74

问:

我想使用 angular 材质输入为输入文本创建自定义组件,但我不知道如何将每个输入字段的验证绑定到自定义组件。有没有办法将每个字段的错误设置为如下所示的对象数组

<app-custom-input
          formControlName="username"
          label="Username"
        ]"
        ></app-custom-input>

我希望将验证设置为类似于这样的 formControl 中的 formGroup

 form: FormGroup;
  constructor(
    private fb: FormBuilder
  ) {
    this.form = new FormGroup({
      name: new FormControl('', Validators.required)
    });

https://stackblitz.com

验证 输入 角度材料

评论


答:

0赞 Francesco Moro 8/4/2023 #1

您必须编写一个实现接口的组件。ControlValueAccessor

在其中,您将有一个“标准”AbstractControl(即,,),像普通AbstractControl一样实例化(即FormGroupFormControlFormArraycontrol = this.fb.control(null, Validators.required);)

在这里,你可以找到一个很好的起点。