Угловая проверка формы, доступ к управлению формой и итерации по HTML

Question

У меня есть список вопросов с вариантами ответов в поле переключателя. Я получаю эти вопросы и ответы из файла JSON. Поэтому я перебираю его в HTML и динамически присваиваю значения formControlName. Моя проблема заключается в том, как проверить при переборе контрольных значений?

*ngIf="cricketForm.control.get('ques{{i}}').invalid" 

*ngIf="cricketForm.control.get('ques{{i}}').invalid" 

это дает мне ошибку. Как это сделать правильно?

https://stackblitz.com/edit/angular-yq4lyz-zt9b3h?file=app/form-field-overview-example.html В настоящее время проверка не работает правильно

HTML-файл:

<form [formGroup]="cricketForm">
  <div *ngFor = "let user of userJson; let i =index ">
    <div class="label1" for="NameId">{{user.question}}</div>
    <mat-radio-group formControlName="ques{{i+1}}" aria-label="Select an option">
      <div *ngFor = "let option of user.options; let j =index">
        <mat-radio-button  [value]=j>{{option}}</mat-radio-button>
      </div>
    </mat-radio-group>


  <div class="invalid-feedback" *ngIf="cricketForm.control.get('ques{{i}}').invalid" >This field is required</div>
  </div>
    <button (click)="onSubmit()">Submit</button>
    <button (click)="onReset()">Reset</button>
</form>

файл TS:

ngOnInit() {
    this.cricketForm = this.formBuilder.group({
      ques1: [null, [Validators.required]],
      ques2: [null, [Validators.required]],
      ques3: [null, [Validators.required]],
      ques4: [null, [Validators.required]]
    })
    this.userDataService.getJSON().subscribe(data => {
      console.log(data);
      this.userJson = data;
      this.options = data.options
    });
}

Пример данных JSON:

[
{"question": "Who Was The First Indian To Hit A Test Century?", "options":["Lala Amarnath","Kapil Dev", "Sunil Gavaskar"],"ans":"Lala Amarnath"},
{"question":"Who Won The Inaugural Asia Cup Championship?","options":["Pakistan","Sri Lanka", "India"],"ans":"India"},
{"question":"Who Was Australia’s First Captain?","options":["F.S.Jackson"
,"D.W. Gregory", "Tony Lewis"],"ans":"D.W. Gregory"},
{"question":" When And Where Was The First Ranji Trophy Match Played?","options":["kolkata"
,"Mumbai", "Chennai"],"ans":"Chennai"}
]

Answer 1

У вас есть синтаксическая ошибка.Должно быть

*ngIf="cricketForm.get('ques'+(i+1)).invalid"

См. Ваш раздвоенный стек

ПРИМЕЧАНИЕ. Я думаю, вы должны попытаться переосмыслить свой код с помощью FormArrays.Путь такой простой, как

<form formGroup="formArray">
  <div *ngFor = "let control of formArray.controls; let i =index ">
    <div class="label1" for="NameId">{{userJson[i].question}}</div>
    <mat-radio-group [formControl]="control" aria-label="Select an option">
      <div *ngFor = "let option of userJson[i].options; let j =index">
        <mat-radio-button  [value]=j>{{option}}</mat-radio-button>
      </div>
    </mat-radio-group>
  <div class="invalid-feedback" *ngIf="control.invalid" >This field is required</div>
  </div>
    <button (click)="onSubmit()">Submit</button>
    <button (click)="onReset()">Reset</button>

</form>

Посмотрите, что мы перебираем formArray.controls и используем i = index.Для отображения меток используйте userJson [i]

где:

this.formArray=new FormArray(
    this.userJson.map(
      ()=>new FormControl(null,Validators.required))
);