使用外部数据绑定进行角度表单验证

Question

我有一个Angular 4表单，但是在注入的服务中跟踪数据（出于此问题范围之外的原因）。

每个输入看起来像......

<input name="..." [ngModel]='getVal(...)' (ngModelChange)='setVal(...)'>

...因为这些getter / setter中有额外的功能。

这很好用，但我也想使用内置验证。如果我给我的表单一个模板引用变量......

<form id="..." #myForm="ngForm">

并查看myForm的值，它不跟踪任何这些输入。我明白了，我的意思是，我特意告诉它在其他地方跟踪它们。

但是我如何利用内置的HTML5验证？即必需和模式

Answer 1

您可以在html中使用这样的验证。这是基于模板的验证，根据您的要求。 在所有字段都经过验证之前，“提交”按钮不会处于活动状态。

<form (ngSubmit)="submitFunc()">
             <input name="name"  [ngModel]='getVal(...)' (ngModelChange)='setVal(...)'
               required pattern=""> //required pattern here
                <button [disabled]="!myForm.form.valid"  type="submit">Submit Form  </button> 
     </form>

您必须在输入字段中添加必填项，并使用常规排期指定模式。