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>

问题：在正确验证本机输入的同时 - 浏览器显示＆＃34;请填写此字段。＆＃34;在需要时提交提示 - 我很高兴接受balls的空输入。

仅在提交时显示通用/非描述性错误的ngNativeValidate行为现在很好，而且我们没有时间将所有内容转换为带有自定义验证消息的Angular表单，因此isn＆＃39;是一个选项。我正在寻找的是一种从原生验证切换到Angular验证的方法，尽可能少地维护可接受的UX - 例如只需禁用提交按钮，直到表单输入有效。

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

此处的文档非常稀疏，所以我不确定下一步该尝试什么。有谁知道是否可以配置ngForm来验证那些后代组件＆＃39;表格字段？

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>

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

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

<强> Ng-run Example

另见：

Angular2 nested template driven form

Angular子表单字段验证

1 个答案: