如何在提交时验证反应式表单？
如何在提交时验证反应式表单？
提问于 2018-09-18 14:27:46
我正在为我的申请使用反应式表单，我想在提交时验证表单，但我无法做到这一点。这是我的代码，任何人都可以让我知道我做错了什么或遗漏了什么。
这是我的表单生成器
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController,LoadingController, Events,AlertController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { MyinfoService} from '../../../../providers/app-services/myinfo/myinfo.service';
private formBuilder: FormBuilder) {
this.licenseinfo = navParams.get('licenseinfo');
this.startDate = this.licenseinfo.dlIssued_date;
this.expiryDate= this.licenseinfo.dlExpiry_date;
console.log(this.startDate);
this.todo = this.formBuilder.group({
issued_state : ['', Validators.required],
license_no : ['', Validators.required],
name : ['', Validators.required],
status : ['Pending'],
issued_date : ['',Validators.required],
expiry_date : ['',Validators.required],
address_line1 : ['',Validators.required],
address_line2 : [''],
city : ['',Validators.required],
zipcode: ['',Validators.required],
state : ['',Validators.required],
employee_id : ['']
});
}这是我的表格
<ion-header>
<ion-navbar>
<ion-buttons start>
<button ion-button (click)="dismiss()">Close</button>
</ion-buttons>
<ion-title>License Info Edit</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="todo" (ngSubmit)="saveMyinfoLicenseinfo()">
<ion-item>
<ion-label stacked class="requiredLabel"> State Issued By</ion-label>
<ion-input value="{{licenseinfo.issued_state}}" formControlName="issued_state"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">Driver Lic. No</ion-label>
<ion-input type="text" value="{{licenseinfo.driver_lic_no}}" formControlName="license_no"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">Name on DL</ion-label>
<ion-input value="{{licenseinfo.name}}" formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">Date Issued</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="DD MMM YYYY" formControlName="issued_date" [(ngModel)]="startDate" ></ion-datetime>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">Expiry Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="DD MMM YYYY" formControlName="expiry_date" [(ngModel)]="expiryDate" ></ion-datetime>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">Address Line1</ion-label>
<ion-input value="{{licenseinfo.address_line1}}" formControlName="address_line1"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked >Address Line2</ion-label>
<ion-input value="{{licenseinfo.address_line2}}" formControlName="address_line2"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">City</ion-label>
<ion-input value="{{licenseinfo.city}}" formControlName="city"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">State</ion-label>
<ion-input value="{{licenseinfo.issued_state}}" formControlName="issued_state"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked class="requiredLabel">Zipcode</ion-label>
<ion-input value="{{licenseinfo.zipcode}}" formControlName="zipcode"></ion-input>
</ion-item>
<ion-input value="{{employee_id}}" formControlName="employee_id" hidden></ion-input>
<ion-row>
<ion-col>
<button ion-button type="button" color="dark" outline block margin-top (click)="dismiss()">Cancel</button>
</ion-col>
<ion-col>
<button ion-button type="submit" color="dark" margin-top block>Save</button>
</ion-col>
</ion-row>
</form>
</ion-content>这是我的提交代码：
saveMyinfoLicenseinfo(){
if(this.todo.valid){
let loading = this.loadingCtrl.create({});
loading.present();
this.myinfoService.saveLicenseDetails(this.todo.value).subscribe(data => {
loading.dismiss();
if(data.isSuccessful){
this.viewCtrl.dismiss(true);
}
else
this.viewCtrl.dismiss(false);
});
this.submitted = true;
}
else{
this.validateAllFields(this.todo);
}
}
validateAllFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
console.log(3);
} else if (control instanceof FormGroup) {
this.validateAllFields(control);
console.log(this.validateAllFields(control));
}
});
}所以我调用onsubmit到这个函数上，如果表单无效，我会尝试让所有的字段都被触动，但是即使在提交之后，字段的颜色也不会改变。我能知道这条路对吗？或者有没有更好的方法呢？
回答 3
Stack Overflow用户
发布于 2018-09-18 15:07:54
您以错误的方式定义了验证器，请查看官方文档，它将帮助您Form Validation
正确的做法是：
this.heroForm = new FormGroup({
'name': new FormControl(this.hero.name, [
Validators.required,
Validators.minLength(4),
forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
]),
'alterEgo': new FormControl(this.hero.alterEgo),
'power': new FormControl(this.hero.power, Validators.required)
});Stack Overflow用户
发布于 2018-09-18 15:14:08
无效的表单字段在提交时不会更改颜色，因为您似乎没有为具有无效值的字段设置任何CSS (或CSS类)。
请看一下Angular文档的Reactive form validation部分，了解以下内容的示例：
- 如何获取有关模板中每个字段有效性的信息，以及
- 如何添加超文本标记语言以在表单旁边/表单内显示错误(如果需要)
在将特定类动态分配给无效的表单域时，The ngClass directive可能非常有用。然后，您可以在附带的CSS文件中编写适当的CSS代码，或者使用Ionic可能专门为无效表单条目提供的任何类。
Stack Overflow用户
发布于 2018-09-19 13:42:27
尝试使用此Html代码。
<form [formGroup]="todo" #f="ngForm" (ngSubmit)='saveMyinfoLicenseinfo()' novalidate>
<ion-item class="Your css class">
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<div *ngIf="f.submitted && todo.controls.name.errors?.required" class="Error class ">Please enter Name</div>
<ion-item>
<button ion-button outline>GO</button>
</ion-item>
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52380191
复制相关文章
相似问题
腾讯云开发者
