我正在尝试验证我的表单,但我没有验证错误,但我的表单未提交。我使用过FormGroup控件。我相信这将是一个非常微不足道的问题,但有些我怎么也无法理解我哪里出错了。
这是我的HTML
<form class="spacingafterlogo" *ngIf="userGender" [formGroup]="formPersonal" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label>Full Name:</ion-label>
<ion-input [formControl]="username" placeholder=""></ion-input>
</ion-item>
<ion-item class="label-row" *ngIf="formPersonal.get('username').dirty && formPersonal.get('username').invalid" >
<span class="error-label">Please enter a valid full name</span>
</ion-item>
<ion-item>
<ion-label>Birth Date:</ion-label>
<ion-datetime class="dob" [formControl]="dob" placeholder="{{userDob}}" displayFormat="DD/MMM/YYYY" pickerFormat="MMM DDD YYYY" max="2000" ></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Gender:</ion-label>
<ion-select class="gender-select" [formControl]="gender">
<ion-option value="Female">Female</ion-option>
<ion-option value="Male">Male</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Email Id:</ion-label>
<ion-input [formControl]="email" type="email" placeholder=""></ion-input>
</ion-item>
<ion-item class="label-row" *ngIf="formPersonal.get('email').dirty && formPersonal.get('email').invalid" >
<span class="error-label">Please enter a valid email</span>
</ion-item>
<ion-item>
<ion-label>Mobile:</ion-label>
<ion-input maxlength="10" [formControl]="phone" pattern="[0-9]*" type="tel" placeholder="Let's get in touch"></ion-input>
</ion-item>
<ion-item class="label-row" *ngIf="formPersonal.get('phone').dirty && formPersonal.get('phone').invalid" >
<span class="error-label">Please enter a valid phone number</span>
</ion-item>
<ion-item>
<ion-label>Address:</ion-label>
<ion-textarea [formControl]="address" placeholder="Tell us where you live"></ion-textarea>
</ion-item>
<ion-item class="label-row" *ngIf="formPersonal.get('address').dirty && formPersonal.get('address').invalid" >
<span class="error-label">Please enter a valid address. Only # , . - and numbers accepted</span>
</ion-item>
<ion-item>
<ion-label>Pincode:</ion-label>
<ion-input [formControl]="pincode" maxlength="6" pattern="[0-9]*" type="tel" placeholder=""></ion-input>
</ion-item>
<ion-item class="label-row" *ngIf="formPersonal.get('pincode').dirty && formPersonal.get('pincode').invalid" >
<span class="error-label">Please enter a valid 6 digit pincode</span>
</ion-item>
<ion-item>
<ion-label>City/Town:</ion-label>
<ion-input [formControl]="city" placeholder=""></ion-input>
</ion-item>
<ion-item class="label-row" *ngIf="formPersonal.get('city').dirty && formPersonal.get('city').invalid" >
<span class="error-label">Please enter a valid city/town</span>
</ion-item>
<ion-item>
<ion-label>State:</ion-label>
<ion-select class="state-select" [formControl]="state" [selectOptions]="selectOptions" ([ngModel])="userState" >
<ion-option *ngFor="let state of statesList" value={{state}} >{{state}}</ion-option>
</ion-select>
</ion-item>
<ion-row>
<ion-col col-2>
<button type="submit" ion-button round color="secondary">Update</button>
</ion-col>
</ion-row>
</form>
这是我的TS文件
import { Component } from '@angular/core';
import { NavController, NavParams ,Platform,AlertController,ToastController, LoadingController} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
import { CustomValidtorsProvider } from '../../providers/custom-validators/custom-validators';
import { ProfileProvider } from '../../providers/profile/profile';
import { StatelistProvider } from '../../providers/statelist/statelist';
@Component({
selector: 'personal-details',
templateUrl: 'personal-details.html',
})
export class PersonalDetailsPage {
statesList : any;
formPersonal : FormGroup;
username : AbstractControl;
phone : AbstractControl;
dob : AbstractControl;
pincode : AbstractControl;
address : AbstractControl;
state : AbstractControl;
city: AbstractControl;
gender : AbstractControl;
email : AbstractControl;
myDate : AbstractControl;
userEmail : string;
userPhone : number;
userDob : string;
userAddress : string;
userPincode : number;
userGender : string;
userState : string;
userCity : string;
userImg : any;
userName : string;
userId : string;
headers: any;
params : any;
selectOptions:any;
loader : any;
timer : any;
dateFormat : string;
userPinCode : any;
constructor(public navCtrl: NavController, public ProfileDetails :ProfileProvider, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder,
private platform : Platform, public alertCtrl: AlertController,private toastCtrl : ToastController, private loadingScreen : LoadingController)
{
platform.ready().then(()=>
{
}
})
}
GetDetails()
{
}
InitForm()
{
this.formPersonal = this.fb.group({
'username':[this.userName, Validators.compose([Validators.required,CustomValidtorsProvider.TextOnlyValidator])],
'password':['',Validators.compose([Validators.required])],
'phone':[ this.userPhone, Validators.compose([Validators.required])],
//'dob':['', Validators.compose([Validators.required])],
'pincode':[ this.userPincode, Validators.compose([Validators.required])],
'address':[this.userAddress, Validators.compose([Validators.required,CustomValidtorsProvider.AddressFieldValidator])],
'state':[this.userState],
'city':[ this.userCity, Validators.compose([Validators.required,CustomValidtorsProvider.TextOnlyValidator])],
'gender':[this.userGender],
'email':[this.userEmail, Validators.compose([Validators.required,CustomValidtorsProvider.EmailValidator])],
'dob':['',""],
});
this.username = this.formPersonal.controls['username'];
this.phone = this.formPersonal.controls['phone'];
//this.dob = this.formPersonal.controls['dob'];
this.pincode = this.formPersonal.controls['pincode'];
this.address = this.formPersonal.controls['address'];
this.state = this.formPersonal.controls['state'];
this.city = this.formPersonal.controls['city'];
this.gender = this.formPersonal.controls['gender'];
this.email = this.formPersonal.controls['email'];
this.dob = this.formPersonal.controls['dob'];
this.formPersonal.controls.gender.setValue(this.userGender);
this.formPersonal.controls.state.setValue(this.userState);
}
}
Loader(){
}
UpdateNativeStorage(){
}
DateFormat(date:string){
}
showAlert(){
}
ionViewDidLoad() {
}
onSubmit(value: string) : void{
console.log(2);
if(this.formPersonal.valid){
this.showAlert()
}
}
}
我已删除所有其他不相关的代码,按钮单击工作正常,我可以看到打印的console.log(),但我的this.showAlert()方法没有启动。当我的所有字段都没有出现任何错误时,我不明白为什么表单无效。这是一个没有错误的快照。
如果我得到任何验证错误,则字段以红色突出显示。请告诉我这里我想念的是什么。
答案 0 :(得分:0)
我遇到了这个问题,在我的InitForm()
方法中,我指定了HTML中没有的'password':['',Validators.compose([Validators.required])]
。因此表格无效,我的方法不起作用。我从我的ts文件中删除了密码提交验证,它工作正常!
答案 1 :(得分:0)
在InitForm()
函数中定义'password' ['',Validators.compose([Validators.required])]
,但.html
中没有密码输入字段因此格式有效
无效的输入文字突出显示颜色可以通过覆盖$text-input-md-highlight-color-invalid
中的共享变量variable.scss
来改变,例如
$text-input-md-highlight-color-invalid:red;