我的代码片段在.ts文件中
this.signUpForm= _fb.group({
'fname': ['',Validators.compose([Validators.required,NdFormValidation.alphaOnly])]
'lname': ['',Validators.compose([Validators.required,NdFormValidation.alphaOnly])],
'gender':['',Validators.compose([Validators.required,NdFormValidation.gender])]
});
this.fname = this.signUpForm.controls['fname'];
this.lname = this.signUpForm.controls['lname'];
this.gender = this.signUpForm.controls['gender'];
我的代码片段在.html文件中
<form [ngFormModel]="signUpForm" (ngSubmit)="onSubmit(signUpForm.value)">
<div class="input-field">
<label for="txtFirstName">First Name</label>
<input type="text" id="txtFirstName" [ngFormControl]="fname" placeholder="John"/>
<span *ngIf="fname.hasError('required') && fname.dirty">First name is required</span>
<span *ngIf="fname.value.length>2 && fname.hasError('invalidAlphaOnly') && fname.dirty">Alphabets and space are only allowed </span>
</div>
<div class="input-field">
<label for="txtLastName">Last Name</label>
<input type="text" id="txtLastName" [ngFormControl]="lname" placeholder="Martin" />
<span *ngIf="lname.hasError('required') && lname.dirty">First name is required</span>
<span *ngIf="lname.value.length>2 && lname.hasError('invalidAlphaOnly') && lname.dirty">Alphabets and space are only allowed </span>
</div>
<div class="input-field">
<label for="cmbGender">Gender</label>
<select id="cmbGender" [ngFormControl]="gender">
<option *ngFor="#sex of genders" [value]="sex" >{{sex|uppercase}}</option>
</select>
<span *ngIf="gender.hasError('required') && gender.dirty">Gender is required</span>
<span *ngIf="gender.hasError('invalidGender') && gender.dirty">Gender can be male,female or other</span>
</div>
<button [disabled]="!signUpForm.valid || signUpForm.pristine" [class.nd-btn-disabled]="!signUpForm.valid || signUpForm.pristine" id="loginButton" type="submit">Sign Up</button>
<button id="signUpButton" [routerLink]="['LoginPage']" type="button" title="Click to login with your existing account">Already have an account?</button>
</form>
我的问题
ngFormControl和验证在fname和lname中按预期工作,但是当我更改select的值时,它总是在ng-pristine(不在ng-dirty状态)和ng-invalid
<div class="input-field" _ngcontent-ybk-5="">
<label _ngcontent-ybk-5="" for="txtLastName">Last Name</label>
<input id="txtLastName" class="ng-dirty ng-valid ng-touched" type="text" _ngcontent-ybk-5="" placeholder="Martin">
</div>
<label _ngcontent-ybk-5="" for="cmbGender">Gender</label>
<select id="cmbGender" class="ng-pristine ng-invalid ng-touched" _ngcontent-ybk-5="">
为什么对<select>
元素所做的更改没有触发.....我无法弄清楚问题是什么,任何可以帮助我或指出我缺少的人
根据马丁评论
我确保signUpForm.value没有通过添加以下代码来反映<select>
控件中的更改
get checkSignUpFormModel() { return JSON.stringify(this.signUpForm.value); }
{{checkSignUpFormModel}}
的输出
{“fname”:“max”,“lname”:“pay”,,“gender”:“”}
虽然我对fname和lname文本框的更改已反映在{{checkSignUpFormModel}}
中,但更改为性别没有任何影响
NdFormValidation.gender就像这样
static gender(control:Control){
console.log('sex',control.value);
if( control.value.match(/^(male|female|others)$/))
return null;
else
return {"invalidGender":true};
}