时间戳

首页 > 解决方案 > 如何使用反应式表单验证来验证文本框

angular5 - 如何使用反应式表单验证来验证文本框

问题描述

我已经为文本框创建了自定义文本组件，我正在尝试通过反应式表单验证进行验证，但无法正常工作。

得到错误：

ERROR 错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将一个现有的 FormGroup 实例传递给它（您可以在您的类中创建一个）。

任何人都可以帮助解决这个问题？

https://stackblitz.com/edit/angular-6-reactive-form-validation-9pu6hq?file=app%2Fapp.component.html

app.component.html：

<app-textbox formControlName="password"></app-textbox>

app.component.ts：

this.registerForm = this.formBuilder.group({
        firstName: ['', Validators.required],
        password: ['', [Validators.required, Validators.minLength(6)]]
    });

标签： angular5angular6angular7

解决方案

您需要将其放在分配给表单组的元素app-textbox之间：form

   <form [group]="registerForm">
      <app-textbox formControlName="password"></app-textbox>
   </form>

推荐阅读