角度子表单字段验证

Posted 2023-03-13

【中文标题】角度子表单字段验证

【英文标题】：Angular child form field validation

【发布时间】：2018-08-18 14:59:24

【问题描述】：

我有一些现有代码的结构或多或少像这样：

<!-- 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>

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

ngNativeValidate 仅在提交时显示通用/非描述性错误的行为目前很好，我们没有时间将所有内容转换为带有自定义验证消息的 Angular 表单，因此这不是一个选项.我正在寻找的是一种从本机验证切换到 Angular 验证的方法，以尽可能少的努力来维持可接受的用户体验——例如只需禁用提交按钮，直到表单输入有效。

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

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

【问题讨论】：

你试过自定义验证器吗？

根据我对文档的阅读，我没有看到将自定义验证器应用于此问题的明显方法，但@yurzui 提出了我在下面寻找的内容。

【参考方案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

【讨论】：

这正是我所需要的。非常感谢！ ng-run 看起来棒极了。

如果你想要一个反应式表单而不是一个模板驱动的表单呢？你能举个例子吗？

@olefrank 它应该与模板驱动有很大不同。你可以在这里找到例子***.com/questions/39242219/…