javascript - 使用外部数据绑定(bind)进行 Angular 表单验证

Question

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

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

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

您必须在输入字段中添加 required 并使用正则表达式指定模式。