How do I disable the button until I select gender in Ionic?

Question

I tried this:

      <ion-item>
        <ion-label>Gender</ion-label>
        <ion-select
        required
        ngModel
        #genderCtrl="ngModel"
        [(ngModel)]="gender"
        [ngModelOptions]="{standalone: true}"
        placeholder="Select One">
          <ion-select-option value="female">Female</ion-select-option>
          <ion-select-option value="male">Male</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="!genderCtrl.valid && genderCtrl.touched" >
        <ion-label>
          Please select gender.
        </ion-label>
      </ion-item>




      <ion-button
      [disabled]="!form.valid"
      type="submit"
      expand="block">
      Add patient
    </ion-button>

*ngIf works, so the select is invalid if I don't choose, but according to the ion-button, the full form is valid ... I've tried it too (ionChange) but it doesn't work either ....

Answer 1

Instead of using form.valid, can you use your gender object?

<ion-button [disabled]="!gender" type="submit" expand="block">
  Add patient
</ion-button>