如何在Angular 2中实现表单输入验证

-1

如何通过Angular2 FormsModule使这些输入在提交时显示消息，例如“Name is required”（因此提交按钮被禁用，直到名称内部为止）？如何在Angular 2中实现表单输入验证

<form class=""> 
    <div> 
     <p>Name:</p> 
     <input type="text"> 
    </div> 
    <div class="link-input"> 
     <p>City:</p> 
     <input type="text"> 
    </div> 

    <button 
     (click)="submitForm()"> 
     Submit 
    </button> 
</form>

来源

2016-12-14 Smithy

https：//开头的角.io/docs/ts/latest/cookbook/form-validation.html – ranakrunal9

[https://angular.io/docs/ts/latest/guide/forms.html](https://angular.io/docs/ts/latest/guide/forms.html） – PierreDuc

按照此示例：

<form [formGroup]="registerForm" (ngSubmit)="submitForm(registerForm)" novalidate> 
    <div> 
     <p>Name:</p> 
     <input type="text"> 
     </div> 
     <div class="link-input"> 
      <p>City:</p> 
      <input formControlName="username" type="text"> 
       <em for="username" [hidden]="showError(registerForm.controls.name)" class="invalid">  You left this field blank or email format is not correct</em> 

      </div> 

      <button type="submit" >Submit</button> 
</form>

组件：

showError(field: FormControl){ 
     if(!field) 
      return true; 
     return field.valid || (field.pristine && !field.touched && !this.submitted) 
    } 

submitForm(f: NgForm) { 
    this.submitted = true; 
    if(!f.valid) 
     return; 
}

来源

2016-12-14 12:17:58

谢谢你的回答。我想要做的是使窗体验证模板驱动，是否有一个简单的方法来做到这一点..？对不起，如果我不清楚首先。据我所知，我需要在现有的表单结构中添加一些属性，并为应用程序组件中的功能制作函数。此外，我的应用程序组件应该只导入FormsModule（而不是FormGroup，FormControl等），所以我需要一种方法来做到这一点，没有这两个导入 – Smithy

只需添加检查的形式是有效的，否则禁用按钮

<button type="submit" class="btn btn-danger" [disabled]="!f.valid">Save to List</button>

来源

2016-12-14 12:26:40

如何在Angular 2中实现表单输入验证

回答

相关问题