Disable submit button with md-select

Question

What I have here is I have a md-select in the form, and the md-option could be manually selected or autofilled by some other component. The question is the submit button is disabled probably if I manually fill all the required inputs, however if I using the other component to autofill these fields, sometimes there is no value for the md-select, and the button still able to click.

                  <md-select [userData]="'patient.title'" placeholder="Title" class="full-width" name="title" [(ngModel)]="user.title" required>
                    <md-option *ngFor="let title of titles" [value]="title.Label">
                      {{ title.Label }}
                    </md-option>
                  </md-select>

hjbello · Answer 1 · 2018-09-11T09:29:27.563

You could use the ng-disabled directive like this:

Create boolean variable disableUserDataSelect. In your code set disableDataSelect to false when there is no value for the md-select (or in general when you want do desable the selection). then change you html for the md-select adding ng-disabled="disableUserDataSelect"" like this:

              <md-select ng-disabled="disableUserDataSelect" [userData]="'patient.title'" placeholder="Title" class="full-width" name="title" [(ngModel)]="user.title" required>
                <md-option *ngFor="let title of titles" [value]="title.Label">
                  {{ title.Label }}
                </md-option>
              </md-select>

In this way your selection will be disabled when you want.

Check this question:

How to disable md-select

Disable submit button with md-select

1 Answers1