angular - angular2 ngFormControlの選択が機能しない

Question

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