Проверьте, установлен ли какой-либо флажок во вложенном компоненте

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 содержит вопрос внутри себя.Мы передаем много параметров компоненту вопроса.Если он соответствует стилю флажка, будет вызван app-question-checkbox.Таким образом, внутри «let childQuestion of question.questions», каждый childQuestion может быть вопросом-флажком или вопросом другого стиля.

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

Дело в том, что я не могу поставить проверку на компоненте вопроса, так как он используется другими системамии другие системы не нуждаются в проверке.Поэтому я должен добавить проверку для Анкета-детали компонента.

Можно ли проверить, установлены ли какие-либо флажки из родительского компонента Анкета-детали ?

Любая помощь будет оценена!

Answer 1

Мы решили нашу проблему, добавив компонент проверки в компонент вопроса.

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 }));

}

Надеюсь, это поможеткто-то, кто имел подобную проблему с нами.

Answer 2

Вы можете импортировать дочерний компонент в родительский компонент, используя 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
}