如何检查 ts 组件文件 angular 2 中模板表单的有效性？

Question

我在 angular 2 中使用模板表单验证实现了表单验证而且我必须检查打字稿文件中的表单验证。我知道使用反应式表单验证的方式，但我想用模板表单来做。例如。

---- 键入脚本----

class CreateTourComponent extends MeteorComponent implements OnInit {
  ...
   onSubmit(evt){
     if(!myForm.isValid()){
       alert('not valid submission');
     }else{ 
     ... 
     } 
   }
  ...
}

----模板-----

<form class="package-form" #myForm="ngForm">

 <button (click) = "onSubmit(evt)" value='submit'></button>
</form>

模板形式可以吗？

Answer 1

您可以使用myForm.****

<form class="package-form" #myForm="ngForm">
 {{myForm.valid}} 
</form>

Answer 2

您可以通过以下方式完成：

<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">
  ...
</form>

然后：

export class myFormComponent {
   ...
  onSubmit({ value, valid }) {
    console.log(value, valid);
  }

}

Answer 3

component.html

<form name="myForm" role="form" novalidate (ngSubmit)="save(editForm)" #editForm="ngForm">
    <input type="text" class="form-control" name="name" id="name" [(ngModel)]="data.name" required />
    <button type="submit">Save</button>
</form>

component.ts

import { NgForm } from '@angular/forms';

export class AppComponent {
    data: any = {};
    onSubmit(myForm: NgForm) {
        if(myForm.valid) {
             console.log('valid form');
        } else {
             console.log('invalid form');
        }
    }
}

如何检查 ts 组件文件 angular 2 中模板表单的有效性？

How to check validation of template form in ts component file angular 2?

validation

angular2-forms

angular