angular2 ngFormControl选择不起作用

时间:2016-03-07 07:43:55

标签: angular angular2-forms

我的代码片段在.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};
    }

0 个答案:

没有答案