Question

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

----输入脚本----

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

Answer 2

您可以使用myForm.****

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

Answer 3

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

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

然后：

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

}

如何在ts组件文件angular 2中检查模板表单的验证？

3 个答案: