Angular 4/5 表单组验证 [重复]答案

【问题标题】：Angular 4/5 Form Group Validation [duplicate]Angular 4/5 表单组验证 [重复]
【发布时间】：2018-03-12 23:04:04
【问题描述】：

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

我不想检查整个表单是否有效 - 我知道该怎么做。我有一个步进流程表单，如果下一步按钮无效，我想禁用它。

即表单控件是否有类似的东西，而不仅仅是表单组？：

[disabled]="!formGroup.valid"

【问题讨论】：

this.fb.group({ fieldID: fieldID, fieldname: field, displayname: name});该组中的每个fromcontrol都有一个有效值。

标签： angular angular-material

【解决方案1】：

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

要获取错误，请使用

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

或者更简单

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

一旦获得表单控件（使用formGroup.get），您就可以用它做任何您想做的事情。测试错误可能是获取控件是否有效的最简单方法。

要掌握每种可用的方法，您可以使用 IDE 中的自动完成功能。在你的打字稿中，创建一个FormControl 变量，看看你能在它上面做什么。

【讨论】：

【解决方案2】：

你可以的

[disabled]="!formGroup.get("myControlName").valid"

【讨论】：

恐怕这行不通

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

这是使用模板驱动的表单，而且我也不知道如何显示错误。如果输入无效，我更喜欢禁用步进进程表单中的按钮的解决方案。谢谢
如果您只想显示基于步进器的单个按钮，您可以获取一个数字变量并在按钮单击时更改它。您的按钮将被禁用，如下所示：[disabled]="!stepper==1" 并使用下一个按钮 !stepper==2 执行此操作，依此类推