我有一个带有答案选项的问题列表,作为单选按钮字段。我从JSON文件中获得了这些问题和答案,因此正在HTML上对其进行迭代并将其值动态分配给formControlName。我的问题是在迭代控制值时如何进行验证?
*ngIf="cricketForm.control.get('ques{{i}}').invalid"
*ngIf="cricketForm.control.get('ques{{i}}').invalid"
Run Code Online (Sandbox Code Playgroud)
这给我一个错误。如何以正确的方式来做?
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>
Run Code Online (Sandbox Code Playgroud)
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 = …Run Code Online (Sandbox Code Playgroud) javascript validation typescript angular angular-reactive-forms