Добавить проверку в форму Dynami c

Question

Я пытаюсь создать простую форму с несколькими вопросами и раскрывающимися списками ответов.

Итак, вот моя попытка.

Я успешно создал форму Dynami c. данные загружаются правильно, чтобы раскрывающийся ответ, но проверка вызывает проблему.

вот мой код формы

<div [formGroup]="formQ">
<div *ngFor="let question of questionList; index as i;" class="row">
    <div class="input-group col-md-12" style="padding: .15em .5em">  
        <div class="input-group-prepend col-md-9" style="padding: 0; margin: 0;">                
            <label class="input-group-text w-15">{{i + 1}}</label>
            <label class="input-group-text w-100" style="text-align: left; white-space: normal;">{{question.quetext}}</label>
        </div>
        <select class="form-control" style="height:auto !important;" 
        [formControlName]="question.controlName"
         [ngClass]="{ 'is-invalid': submittedQ && fQ.controlName.errors }">
            <option [ngValue]="null"> --Select-- </option>
            <option *ngFor="let ansItem of question.answerList" [ngValue]="ansItem" >{{ansItem.anstext}}</option>
        </select>
        <div *ngIf="submittedQ && fQ.controlName.errors" class="invalid-feedback">
            <div *ngIf="fQ.controlName.errors.required">Required</div>
        </div>
    </div> 
</div>

export class formComponent implements OnInit {
  formQ: FormGroup;
  group: any = [];
  quesList: Question[] = [];
  submittedQ: boolean;
  constructor(
    private router: Router,
    private formBuilder: FormBuilder
    private formService: FormService,
    public dialogService: DialogService ) {
      this.quesList.forEach(q => {
        this.group[q.controlName] = new FormControl(null, Validators.required);
      });
      this.formQ = new FormGroup(this.group);
  }
  ngOnInit(): void {    
    this.submittedQ = false;
    this.formService.GetPageLoadData().subscribe(
      data => {
        data.forEach(q => {
          this.group[q.controlName] = new FormControl(q.selectedAns , Validators.required);
        });
        this.formQ = new FormGroup(this.group);
        this.formdetail = data;
    });
  }
  get fQ() { return this.formQ.controls; }

  submitForm() {
    this.submittedQ = true;
    if (this.formQ.invalid) {
      return;
    }
  }
}

export class Question {
    controlName: string;
    queid: string;
    quetext: string;
    isAtRisk: boolean;
    answerList: Answers[];
    selectedAns: any;
}

для определения имени элемента управления, которое я заполняю имена как ans_1, ans_2 и т. д. Проблема в том, что fq.controlName.errors не решается как fq.ans_1.errors, и я получаю сообщение об ошибке

FormComponent.html:153 ERROR TypeError: Cannot read property 'controlName' of undefined
at Object.eval [as updateDirectives] (FormComponent.html:155)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:30043)
at checkAndUpdateView (core.js:29439)
at callViewAction (core.js:29680)
at execEmbeddedViewsAction (core.js:29643)
at checkAndUpdateView (core.js:29440)
at callViewAction (core.js:29680)
at execComponentViewsAction (core.js:29622)
at checkAndUpdateView (core.js:29445)
at callViewAction (core.js:29680)

Любая помощь будет принята с благодарностью. Найдите приложение здесь https://stackblitz.com/edit/angular-ivy-reuwfy?file=src%2Fapp%2Fapp.component.html

Спасибо

Answer 1

Внутри вашего ngOnInit вы используете

this.group[q.controlName] = new FormControl(q.selectedAns , Validators.required);

, тогда ваше имя элемента управления здесь будет ans_1 not controlName

Итак, в вашем шаблоне вы должны использовать как показано ниже:

Вместо fQ.controlName.errors.required используйте fQ.ans_1.errors.required

Вот обновленный stackblitz для справки ссылка

Answer 2

Cannot read property 'controlName' of undefined означает, что вы пытаетесь получить доступ к controlName по неопределенной переменной. В вашем случае fq.controlName. fq здесь undefined.
Ваша функция get fQ() { return this.formQ.controls; }
Замените fq на fQ
Q прописными буквами.