如何檢查ts組件文件角度2中的模板表單驗證？

我實現了表單驗證使用模板表單驗證角2 而且我必須檢查打字稿文件內的表單驗證。我知道使用反應式表單驗證的方式，但我想用模板表單來完成。例如，。如何檢查ts組件文件角度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>

有可能是模板形式？

來源

2017-09-08 Fullstack Dev

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

來源

2017-09-09 04:55:19 Chandru

您可以使用myForm.****

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

來源

2017-09-08 21:43:58 Aravind

感謝。我必須檢查ts文件裏面的驗證，有沒有其他方法？因爲提交按鈕與窗體分開，而不是窗體內部。 –

通過驗證您的意思？自定義驗證還是？添加相關代碼以發佈 – Aravind

無自定義驗證。

<按鈕（點擊）= 「的onsubmit（EVT）」> 在這種情況下，我要檢查TS文件 –

您可以通過以下做到這一點：

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

然後：

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

}

來源

2017-09-08 21:54:28 Vega

如何檢查ts組件文件角度2中的模板表單驗證？

回答

相關問題