Angular - 在选择所有选项之前禁用按钮
Angular - Disabling button until all options are selected
我想禁用下一步按钮,直到所有语句都被选中,这意味着必须选择一个选项。我已经尝试过,但在选择所有选项后,我仍然坚持如何启用它?
另外,如果我回去,它不应该显示禁用按钮。有什么帮助吗? (已解决)
编辑:
我的应用程序现在有 2 个场景,2 个不同类型的问题。
第一种情况是mcq类型,其中只有一个选项可以选择。
第二种情况,T/F 所有选项可以是真也可以是假。
建议的解决方案有效,但我希望它基于 questionType 而不是
问题编号。因为后者不会是唯一的。
HTML
<div class="qitem qclose"
[ngClass]="{'qclose-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'false')}"
(click)="changeFalse(j , item, searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
<i class="qitembox qclose-icon">F</i>
</div>
<div class="qitem qtick"
[ngClass]="{'qtick-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'true')}"
(click)="changeTrue(j , item,searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
<i class="qitembox qtick-icon">T</i>
</div>
TS
setQuestionAnswer(i,option,step,answer){
console.log(option,i);
/*Update question status in options array*/
this.QuizData.map(res=>{
console.log(res.tfQuestionNumber,step);
if(res.tfQuestionNumber === step){
res.options.map(res=>{
if(res.id === option.id){
res.status = answer;
}
})
}
});
/*-----------------------------*/
console.log(this.QuizData);
/*Calculate total values selected*/
this.totalConditions(option, step);
/*-----------------------------*/
}
只需使用布尔值设置每个步骤的状态,并将您的答案状态的值添加为选项数组的真或假。您可以通过向 QuizData
数组添加新的 属性 状态来完成此操作,该数组包含来自 API 的数据,如下所示:
this.QuizData.forEach(x=>{
x['status'] = true;
x.selectAnswer = { select: '', dirty: '' };
x.options.map((x, index)=>{
x['id'] = index;
x['status'] = null;
})
})
如果您注意到,我已将 ID 属性 添加到用于获取已回答问题并更新其状态的每个字段,如下所示:
changeTrue(i, option, step) {
this.setQuestionAnswer(i, option, step, true);
option.selectAnswer = { select: 'true', dirty: 'true' };
}
setQuestionAnswer(i,option,step){
console.log(option,i);
/*Update question status in options array*/
this.QuizData.map(res=>{
console.log(res.tfQuestionNumber,step);
if(res.tfQuestionNumber === step){ //=====> matching the current step
res.options.map(res=>{
if(res.id === option.id){ // =======> matching the current question and setting it to true or false
res.status = answer;
}
})
}
});
/*-----------------------------*/
console.log(this.QuizData);
/*Calculate total values selected*/
this.totalConditions(option, step);
/*-----------------------------*/
}
现在计算回答的问题总数
totalConditions(option,step){
this.count= 0;
let len = 0;
this.QuizData.map(res=>{
console.log(res.tfQuestionNumber,step);
if(res.tfQuestionNumber === step){
len= res.options.length;
res.options.map(res=>{
if(res.status !== null){
this.count = this.count +1;
}
})
}
});
if(this.count ===len){ // If all all questions answered then remove disable from button
this.QuizData.map(res=>{
if(res.tfQuestionNumber === step){
res.status = false;
}
});
}
}
完成了。您可以随意后退和前进,状态不会更改为禁用。希望对您有所帮助:)
工作示例: https://stackblitz.com/edit/angular-ivy-quiz
场景二:
如果您有 MCQ 选项,那么您只需将这段代码添加到 toggle method() 即可。
toggle(step) {
this.buttonDisabled = false;
this.QuizData.map(res=>{
console.log(res.index,step);
if(res.index === step){
res.status = false;
}
});
console.log(this.QuizData);
}
所以我认为您应该考虑使用反应式表单,并在所有表单控件(每个问题都有一个)变脏时制作一个验证器。
我的第二个建议是遵循您编写的代码。每次您调用 changeFalse 或 changeTrue 时,您都会对所做答案的数量进行计数,然后如果计数等于问题数量[=10=,则相应地设置 this.buttonDisabled ]
我想禁用下一步按钮,直到所有语句都被选中,这意味着必须选择一个选项。我已经尝试过,但在选择所有选项后,我仍然坚持如何启用它? 另外,如果我回去,它不应该显示禁用按钮。有什么帮助吗? (已解决)
编辑: 我的应用程序现在有 2 个场景,2 个不同类型的问题。
第一种情况是mcq类型,其中只有一个选项可以选择。
第二种情况,T/F 所有选项可以是真也可以是假。
建议的解决方案有效,但我希望它基于 questionType 而不是 问题编号。因为后者不会是唯一的。 HTML
<div class="qitem qclose"
[ngClass]="{'qclose-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'false')}"
(click)="changeFalse(j , item, searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
<i class="qitembox qclose-icon">F</i>
</div>
<div class="qitem qtick"
[ngClass]="{'qtick-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'true')}"
(click)="changeTrue(j , item,searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
<i class="qitembox qtick-icon">T</i>
</div>
TS
setQuestionAnswer(i,option,step,answer){
console.log(option,i);
/*Update question status in options array*/
this.QuizData.map(res=>{
console.log(res.tfQuestionNumber,step);
if(res.tfQuestionNumber === step){
res.options.map(res=>{
if(res.id === option.id){
res.status = answer;
}
})
}
});
/*-----------------------------*/
console.log(this.QuizData);
/*Calculate total values selected*/
this.totalConditions(option, step);
/*-----------------------------*/
}
只需使用布尔值设置每个步骤的状态,并将您的答案状态的值添加为选项数组的真或假。您可以通过向 QuizData
数组添加新的 属性 状态来完成此操作,该数组包含来自 API 的数据,如下所示:
this.QuizData.forEach(x=>{
x['status'] = true;
x.selectAnswer = { select: '', dirty: '' };
x.options.map((x, index)=>{
x['id'] = index;
x['status'] = null;
})
})
如果您注意到,我已将 ID 属性 添加到用于获取已回答问题并更新其状态的每个字段,如下所示:
changeTrue(i, option, step) {
this.setQuestionAnswer(i, option, step, true);
option.selectAnswer = { select: 'true', dirty: 'true' };
}
setQuestionAnswer(i,option,step){
console.log(option,i);
/*Update question status in options array*/
this.QuizData.map(res=>{
console.log(res.tfQuestionNumber,step);
if(res.tfQuestionNumber === step){ //=====> matching the current step
res.options.map(res=>{
if(res.id === option.id){ // =======> matching the current question and setting it to true or false
res.status = answer;
}
})
}
});
/*-----------------------------*/
console.log(this.QuizData);
/*Calculate total values selected*/
this.totalConditions(option, step);
/*-----------------------------*/
}
现在计算回答的问题总数
totalConditions(option,step){
this.count= 0;
let len = 0;
this.QuizData.map(res=>{
console.log(res.tfQuestionNumber,step);
if(res.tfQuestionNumber === step){
len= res.options.length;
res.options.map(res=>{
if(res.status !== null){
this.count = this.count +1;
}
})
}
});
if(this.count ===len){ // If all all questions answered then remove disable from button
this.QuizData.map(res=>{
if(res.tfQuestionNumber === step){
res.status = false;
}
});
}
}
完成了。您可以随意后退和前进,状态不会更改为禁用。希望对您有所帮助:)
工作示例: https://stackblitz.com/edit/angular-ivy-quiz
场景二:
如果您有 MCQ 选项,那么您只需将这段代码添加到 toggle method() 即可。
toggle(step) {
this.buttonDisabled = false;
this.QuizData.map(res=>{
console.log(res.index,step);
if(res.index === step){
res.status = false;
}
});
console.log(this.QuizData);
}
所以我认为您应该考虑使用反应式表单,并在所有表单控件(每个问题都有一个)变脏时制作一个验证器。
我的第二个建议是遵循您编写的代码。每次您调用 changeFalse 或 changeTrue 时,您都会对所做答案的数量进行计数,然后如果计数等于问题数量[=10=,则相应地设置 this.buttonDisabled ]