Angular 子表单字段验证

Question

我有一些现有代码的结构大致如下：

<!-- my-form.html -->

<form ngNativeValidate>
    <my-other-component></my-other-component>
    <button mat-button type='submit'>Submit</button>
</form>


<!-- my-other-component.html -->

<input name='native-input' required />

<mat-form-field>
    <mat-select name='balls' required>
        <mat-option value='a'>a</mat-option>
        <mat-option value='b'>b</mat-option>
        <mat-option value='c'>c</mat-option>
    </mat-select>
</mat-form-field>

问题：当本机输入被正确验证时——浏览器在需要时在提交时显示 "Please fill out this field." 提示——很高兴地接受 balls 的空输入。

仅在提交时显示 generic/non-descriptive 错误的 ngNativeValidate 行为目前没问题，我们没有时间将所有内容转换为带有自定义验证消息的 Angular 表单，所以这不是一个选择。我正在寻找的是一种从本机验证切换到 Angular 验证的方法，以尽可能少的努力来维护可接受的用户体验——例如简单地禁用提交按钮，直到表单输入有效。

根据 angular.io/guide/form-validation，我看到我可以将 ngNativeValidate 更改为 #myForm='ngForm' 并将 [disabled]='myForm.invalid' 添加到提交按钮。但是，此验证仅适用于直接在 my-form.html 中的表单字段，不适用于 my-other-component.

中的表单字段

这里的文档真的很少，所以我不确定接下来要尝试什么。有谁知道是否可以配置 ngForm 来验证那些后代组件的表单字段？

Answer 1

如果您想使用模板驱动的表单方法，那么您必须将 FormsModule 导入您的 @NgModule 并将 NgModel 指令应用于所有控件

<input name='native-input' ngModel required />
                           ^^^^^^^
<mat-form-field>
  <mat-select name='balls' ngModel required>
                             ^^^^^^^
    <mat-option value='a'>a</mat-option>
    <mat-option value='b'>b</mat-option>
    <mat-option value='c'>c</mat-option>
  </mat-select>
</mat-form-field>

现在你的子组件应该知道父表单了。为此，您需要在 viewProviders 数组中提供 ControlContainer 令牌：

@Component({
  selector: 'my-other-component',
  template: `
    ...
  `,
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class MyOtherComponent {

Ng-run Example

另请参阅：

Angular2 nested template driven form

Angular 子表单字段验证

Angular child form field validation

javascript

angular-material

angular2-forms

angular