Question

我需要在页面上添加验证，如果没有选中任何复选框问题，会显示错误消息。但是，此复选框有点像嵌套在名为“问题”的组件中。

调用“问题”组件的页面是 questionnaire-detail.component.html

<div *ngFor="let applicant of applicants$ | async">
<div *ngIf="applicant.id === (applicant$ | async)?.id">
<app-question [applicants]="applicants$ | async" [currentApplicantId]="applicant.id" [parentForm]="form" *ngFor="let question of questionnaire$ | async"
  [question]="question" [submitted]="submitted" [minLevel]="3" [initialResponses]="initialResponses$ | async"
  [applicantIndexesById]="applicantIndexesById$ | async"></app-question>

question.component.html 本身具有 question 。我们将很多参数传递给问题组件。如果与复选框样式匹配，则将调用app-question-checkbox。因此，在“让问题的问题的子问题”中，每个子问题可以是复选框问题或其他样式问题。

<div *ngIf="!!question?.id && !!currentApplicantId && isChoiceQuestion(parentQuestion) && doesQuestionApplyToCurrentApplicant(question)">
  <app-question-checkbox [formControl]="formControl" text="{{question?.text}}" description="{{question?.description}}"
    [readonlyInput]="readonlyInput"></app-question-checkbox>
</div>

<div *ngIf="!!question && !!question?.questions && doesQuestionApplyToCurrentApplicant(question) && (!question?.id || isCurrentQuestionAnswered())"
[ngClass]="{ 'appform': isChoiceQuestion(question) || !currentApplicantId, 'nested-questions': isChoiceQuestion(question) || (!!parentQuestionId && !!currentApplicantId) }">
<div *ngFor="let childQuestion of question.questions; let i = index">
  <app-question *ngIf="!parentQuestionId || (isChoiceQuestion(question) || shouldDisplayQuestionBasedOnResponse(childQuestion, currentQuestionResponse))"
    [question]="childQuestion" [parentQuestionId]="!question.id? parentQuestionId: question.id"
    [parentQuestionType]="!question.type? parentQuestion?.type: question.type" [parentQuestion]="question"
    [applicants]="applicants" [currentApplicantId]="currentApplicantId" [parentForm]="parentForm"
    [parentQuestionResponse]="!currentQuestionResponse ? parentQuestionResponse : currentQuestionResponse"
    [submitted]="submitted" [level]="level" [minLevel]="minLevel" [maxLevel]="maxLevel" [initialResponses]="initialResponses"
    (selected)="onQuestionSelected($event)" [expanded]="currentlySelectedQuestionId === childQuestion.id"
    [applicantIndexesById]="applicantIndexesById" [readonlyInput]="readonlyInput" [productsSelected]="productsSelected"
    [showNoneOfTheAboveForChoiceQuestions]="showNoneOfTheAboveForChoiceQuestions" (responseChanged)="onResponseChanged($event)">
  </app-question>
</div>

问题是我无法对问题组件进行验证，因为它已由其他系统共享，并且其他系统不需要验证。因此，我必须在 questionnaire-detail 组件上添加验证。

是否可以检查是否从父组件问卷详细信息中选中了任何复选框？

任何帮助将不胜感激！

Answer 1

您可以使用DI将子组件导入父组件。在您的情况下，公开公共方法'validateQuestiocCheckbox'方法，该方法将返回验证结果。它将在父组件中调用。

questionnaire-detail.component

constructor(private qc: questionComponent){}

ngOnInit(){
  this.qc.validateQuestiocCheckbox();
}

question.Component

validateQuestiocCheckbox(){
   // section of code used to validate question checkbox
   //return true/false
}

Answer 2

我们通过在问题组件内部添加验证器组件解决了问题。

question.component.html

<div *ngIf="shouldValidateAtLeastOneCheckboxChecked()">
  <app-required-checkbox-validator [parentForm]="parentForm" [submitted]="submitted" text="Please select at least one of the above options"></app-required-checkbox-validator>
</div>

然后在验证器组件中的构造函数中使用所需的验证。因此，一旦用户单击提交，它将验证是否选中了任何复选框。如果没有，它将显示错误消息。

required-checkbox-validator.component.ts

constructor() {
this.control = new FormControl('', (control: AbstractControl) => ({ required: true }));

}

希望这会对与我们有类似问题的人有所帮助。

检查嵌套组件中是否选中任何复选框

2 个答案: