*ngIf 带按钮，禁用或未禁用 Angular 9答案

【问题标题】：*ngIf with button, disabled or not disabled Angular 9*ngIf 带按钮，禁用或未禁用 Angular 9
【发布时间】：2020-06-11 20:52:45
【问题描述】：

我有两个下拉菜单，它们是单击Retrieve 按钮时调用的函数的参数。我想要发生的是当两个下拉菜单都没有选择数据时，Retrieve 按钮被禁用。如果两个下拉菜单都有数据，那么我希望按钮正常运行。这是我当前的html：

<div class="dropdown">
  <div class="input-group">
    <h4 class="sessionText">Session: </h4>
    <select [(ngModel)]='sessionReportFilter.sessionName'
            class="custom-select form-control-sm"
            (change)='sessionDataChange($event)'
            id="inputGroupSelect01">
      <option [value]="null">Select session...</option>
      <option *ngFor="let session of sessionData" [value]='session.sessionName'>
        {{session.sessionName}}
      </option>
    </select>
  </div>

  <div class="input-group">
    <h4 class="reportText">Report Date: </h4>
    <select [(ngModel)]='sessionReportFilter.fileName' *ngIf='currentSession' class="custom-select form-control-sm" id="inputGroupSelect01">
      <option [value]="null">Select report...</option>
      <option *ngFor="let report of currentSession.reportFiles"
              [value]="report">
        {{report}}
      </option>
    </select>
    <select *ngIf="currentSession === null" class="custom-select form-control-sm" id="inputGroupSelect01"></select>
  </div>
  <div>
    <button type="button" class="btn btn-primary" disabled="disabled">Retrieve</button>
    <button type="button" class="btn btn-primary" (click)="orderExceptionReportData()">Retrieve</button>
  </div>
</div>

我怎样才能达到预期的效果？

【问题讨论】：

只有当用户从两个 ddls 中选择了值时，您才希望启用该按钮，否则，检索按钮将被禁用，对吗？
@FurqanS.Mahmoud 正确

标签： html angular angular-ng-if

【解决方案1】：

[disabled]="!sessionReportFilter.fileName && !sessionReportFilter.sessionName"

当至少一个下拉菜单没有值时，替换您想要禁用按钮的位置，

所以

<button type="button" class="btn btn-primary" disabled="disabled">Retrieve</button>

应该是

<button type="button" class="btn btn-primary" [disabled]="!sessionReportFilter.fileName && !sessionReportFilter.sessionName">Retrieve</button>

【讨论】：

【解决方案2】：

您可以使用 Angular 响应式表单验证轻松解决此问题，您只需将 HTML 脚本链接到formControlName，打字稿将处理这一切：

假设我们有两个选择列表，一个是食品，另一个是汽车，只有当两个列表都被选中（保存用户输入的值）时，我们才需要启用提交按钮，这意味着这两个字段必须是required，我们可以通过使用称为required的角内置验证将它们标记为必需，如果一个验证未验证到true，角将标记整个表单无效，在HTML中脚本我们可以利用表单的状态来启用或禁用submit 按钮：

打字稿代码：

export class SelectOverviewExample {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
  form : FormGroup;
  constructor(private fb: FormBuilder){
    this.createForm();
  }
  createForm(){
    this.form = this.fb.group({
      foods: [{value: '', disabled: false}, [Validators.required]],
      cars: [{value: '', disabled: false}, [Validators.required]],

    });
  }

  onSubmit(){
    // get the values of the form that has been enterd by the user
    console.log(this.form.value);
  }

}

HTML 脚本：

<h4>Basic mat-select</h4>
<form [formGroup]="form" (ngSubmit)="onSubmit()">

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select formControlName="foods">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>


<br>

<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl  formControlName="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>
<br>
 <button mat-raised-button color="primary" cdkFocusInitial class="col-md-3" type="submit"
                    [disabled]="!form.valid">Submit</button>
</form>

现场演示（stackblitz 再现）： https://stackblitz.com/edit/angular-x9nuhj?file=src%2Fapp%2Fselect-overview-example.html

【讨论】：