*ngIf with button, disabled or not disabled Angular 9

Question

I have two drop downs that are parameters for a function that is called on the Retrieve button click. What I want to happen is when both drop downs do not have data selected, the Retrieve button is disabled. If both drop downs have data then I want the button to act normally. Here is my current 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>

How can I achieve the desired results?

You want to enable the button only if the user has selected values from both ddls, otherwise, the retrieve button is disabled, correct? — Furqan S. Mahmoud, Jun 11 '20 at 20:58

Alejandro Camba · Accepted Answer · 2020-06-11T21:11:44.287

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

Replace that where you want the disabled button when at least one dropdown don't have a value,

so

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

would be

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

score 2 · Answer 2 · answered Jun 11 '20 at 21:19

You can use angular reactive forms validations to solve this problem easily, all you need to do is to put your HTML script and link it to formControlName, the typescript will handle it all:

Suppose we have two select lists, one is for foods and the other for the cars, we need to enable the submit button only if both of the lists are selected (hold values that has been entered by the user), that means that these two fields must be required, we can mark them as required by using angular built-in validation called required, angular will mark the whole form as invalid if one validation is not validated to true, in the HTML script we can make use of the form's status to enable or disable the submit button:

typescript code:

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

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

Live demo (stackblitz reproduction): https://stackblitz.com/edit/angular-x9nuhj?file=src%2Fapp%2Fselect-overview-example.html

score -1 · Answer 3 · answered Jun 13 '22 at 10:26

HTML:

<button [disabled]="yourFunctionError" nz-button nzType="primary">Submit</button>

TS:

 export class yourComponent implements OnInit {

    yourFunctionError: string;

    constructor() { }
    ngOnInit(): void {
        
        });

     this.yourFunctionError= true; //Use your logic
    }

*ngIf with button, disabled or not disabled Angular 9

3 Answers3