*ngIf 带按钮,禁用或未禁用 Angular 9
*ngIf with button, disabled or not disabled Angular 9
我有两个下拉菜单,它们是单击 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>
我怎样才能达到预期的效果?
[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>
您可以使用 angular 反应式表单验证轻松解决这个问题,您需要做的就是将您的 HTML 脚本和 link 放到 formControlName
, 打字稿会处理这一切:
假设我们有两个 select 列表,一个用于食品,另一个用于汽车,只有当两个列表都被 selected(保留值)时,我们才需要启用提交按钮已由用户输入),这意味着这两个字段必须是 required
,我们可以通过使用 angular 内置验证调用 required
、[=33] 将它们标记为必需=] 将在 true
验证未通过验证时将整个表单标记为无效,在 HTML 脚本中,我们可以利用表单的状态来启用或禁用 [=16=] 按钮:
打字稿代码:
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
我有两个下拉菜单,它们是单击 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>
我怎样才能达到预期的效果?
[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>
您可以使用 angular 反应式表单验证轻松解决这个问题,您需要做的就是将您的 HTML 脚本和 link 放到 formControlName
, 打字稿会处理这一切:
假设我们有两个 select 列表,一个用于食品,另一个用于汽车,只有当两个列表都被 selected(保留值)时,我们才需要启用提交按钮已由用户输入),这意味着这两个字段必须是 required
,我们可以通过使用 angular 内置验证调用 required
、[=33] 将它们标记为必需=] 将在 true
验证未通过验证时将整个表单标记为无效,在 HTML 脚本中,我们可以利用表单的状态来启用或禁用 [=16=] 按钮:
打字稿代码:
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