0

我在 .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>元素所做的更改没有触发.....我不知道是什么问题，任何可以帮助我或指出我所缺少的人

根据马丁评论

<select>我通过添加以下代码确保 signUpForm.value 不反映控件的更改

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};
    }
4

0 回答 0