如果选中一个或多个复选框,如何启用提交按钮?
问题描述:
我在这里通过Mark的解决方案:Angular2, disable button if no checkbox selected 但我有超过1个数组,我该如何修改链接中的代码?如果选中一个或多个复选框,如何启用提交按钮?
或者有任何其他解决方案的人来做这件事吗?我想这样做在angularJs 2
我有很多类(阵列)&这些类中的一些科目,&每个主题对应一个复选框,如果一个或更多的复选框被选中,不管他们属于到相同或不同的课程,该按钮应该启用。 下面的代码,现在它只考虑的Class1:
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
template: `
<label *ngFor="let cb of class1">
<input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/>
</label><br/>
<label *ngFor="let cb of class6">
<input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/>
</label>
<p><button [disabled]="buttonState()">button</button></p>
`
})
class App {
class1 = [{label: 'English(class1-5)'},{label: 'Maths(class1-5)'}];
class6 = [{label: 'English(class6-8)'},{label: 'Maths(class6-8)'}];
buttonState() {
console.log('buttonState() called');
return !this.class1.some(_ => _.state);
}
}
答
我没有运行此代码,但这个想法是团结的复选框州一个PARAM。在下面的代码中,我使属性buttonState存储按钮状态。我还使用(ngModelChange)
作为事件侦听器来调用方法setButtonState()
。我没有在您的class1/class6数组中看到“状态”参数。
链接:
ngModelChange:使用https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel
例如:Angular 2 ngModelChange select option, grab a specific property
@Component({
selector: 'my-app',
template: `
<label *ngFor="let cb of classes">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()"/>{{cb.label}}
</label>
<p><button [disabled]="buttonState">button</button></p>`
})
export class AppComponent {
private buttonState: boolean = true;
private classes = [{label: 'English(class1-5)', state: false},{label: 'Maths(class1-5)', state: false},
{label: 'English(class6-8)', state: false},{label: 'Maths(class6-8)', state: false}
];
setButtonState() {
let counter = 0;
for(let i=0;i<this.classes.length;i++) {
if (this.classes[i].state === true) {
counter++;
}
}
if (counter >= 2) {
this.buttonState = false;
} else {
this.buttonState = true;
}
}
}
感谢@kalininadev我这里跑了你的代码,它似乎没有工作,也许一个小错误,但我是新的angular2&所以不能调试... http://plnkr.co/edit/5syDqwRSV6svBtLumheG?p=preview –
http://plnkr.co/edit/ZhuLFBMJF5ICspiOb7rc?p=preview东西那样@ HimanshiGupta – norweny
@HimanshiGupta是我的回答对你有帮助吗?你解决了这个问题吗? – norweny