angular - 使用 md-select 禁用提交按钮

Question

我在这里有一个 md-select 在表单中，并且 md-option 可以手动选择或由其他一些组件自动填充。问题是如果我手动填写所有必需的输入，提交按钮可能被禁用，但是如果我使用其他组件自动填充这些字段，有时 md-select 没有值，并且按钮仍然可以单击。

                  <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>

标签： angular

Answer 1

您可以像这样使用 ng-disabled 指令：

创建布尔变量 disableUserDataSelect。在您的代码中，当 md-select 没有值时（或者通常当您想要禁用选择时），将 disableDataSelect 设置为 false。然后为 md-select 添加ng-disabled="disableUserDataSelect""更改您的 html，如下所示：

              <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>

这样，您的选择将在您需要时被禁用。

检查这个问题：

如何禁用 md-select