如何在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

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');
        }
    }
}