Question

我在Angular应用程序上设置了一个被动表单，但是我想弄清楚Angular 4/5是否有办法检查带有formControlName指令的输入是否有效。

我不想检查整个表格是否有效 - 我知道如何做到这一点。我有一个步进处理表单，如果它无效，我想禁用下一个按钮。

即。是否有类似表单控件的内容，而不仅仅是表单组？：

[disabled]="!formGroup.valid"

Answer 1

除非您将变量声明为表单控件（即表单组之外），否则您必须使用该表单来访问它们。

要获取错误，请使用

[disabled]="formGroup.hasError('form control name', 'required')"

或更简单

[disabled]="formGroup.get('form control name').hasError('required')"

获得表单控件（使用formGroup.get）后，您可以随意执行任何操作。如果控件有效，则测试错误可能是最简单的方法。

要掌握每种可用方法，您可以使用IDE中的自动完成功能。在您的打字稿中，创建一个FormControl变量，并查看您可以对其执行的操作。

Answer 2

你可以做到

[无效] = “！formGroup.get（” myControlName “）。有效”

Answer 3

我认为你试图以错误的方式解决这个问题。在步进形式中，您应该为每个步骤创建一个反应形式。这样，您可以通过检查此特定（步骤）表单的状态来检查每个步骤是否有效。

在material2库中演示了一个实现，他们也使用了这种方法。

Answer 4

您可以检查每个输入是否有错误。你可以这样做：

<input id="name" name="name" class="form-control"
       required minlength="4" appForbiddenName="bob"
       [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
     class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
</div>

Angular 4/5表格组验证

4 个答案: