validation - 提交时的 Angular 2 触发器表单验证

Question

我创建了一个带有 angular 2 的表单并添加了一些客户验证器。现在我想在用户点击提交按钮时触发表单验证。到目前为止，在我发现的示例中，只要表单无效，提交按钮就会被禁用，但我希望提交按钮始终启用，并且当用户点击提交时，表单应该被验证。有谁知道我如何使这项工作以及我应该使用哪种 typescript 方法？我找到了 updateValueAndValidity 方法，但它似乎不适用于此方法。

Answer 1

如果您使用的是模板驱动表单，则可以使用以下语法:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <button type="submit">Save</button>
</form>

.ts

add(isValid: boolean){
   if(isValid){
       //do something
   }
}

你也可以像这样在提交时添加一些错误:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <label>Name</label>
    <div>
        <input [(ngModel)]="name" name="name" #name="ngModel" required>
    </div>
    <div[hidden]="name.valid || (name.pristine && !f.submitted)">
        <small class="text-danger">Please input name</small>
    </div>
    <button type="submit">Save</button>
</form>