Javascript 角度表单验证,在HTML上迭代时访问表单控件
我有一个答案选项为单选按钮字段的问题列表。我从JSON文件中得到了这些问题和答案,所以我在HTML上对其进行迭代,并动态地为formControlName赋值。我的问题是如何在迭代控制值时进行验证Javascript 角度表单验证,在HTML上迭代时访问表单控件,javascript,angular,typescript,validation,angular-reactive-forms,Javascript,Angular,Typescript,Validation,Angular Reactive Forms,我有一个答案选项为单选按钮字段的问题列表。我从JSON文件中得到了这些问题和答案,所以我在HTML上对其进行迭代,并动态地为formControlName赋值。我的问题是如何在迭代控制值时进行验证 *ngIf="cricketForm.control.get('ques{{i}}').invalid" *ngIf="cricketForm.control.get('ques{{i}}').invalid" 这给了我一个错误。如何以正确的方式进行 目前验证工作不正常 html文件: &l
*ngIf="cricketForm.control.get('ques{{i}}').invalid"
*ngIf="cricketForm.control.get('ques{{i}}').invalid"
这给了我一个错误。如何以正确的方式进行
目前验证工作不正常
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>
示例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"}
]
您有一个语法错误。一定是
*ngIf="cricketForm.get('ques'+(i+1)).invalid"
看你的
注意:我认为您必须尝试使用Formarray重新思考您的代码。方法很简单
<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>
你能提供JSON数据吗?看看我的库ngx ez,它完成了表单验证的所有繁重工作。在@Sonam的一个演示中,每次只有四个问题吗?@PrashantPimpale我要回答四个问题。如果没有问题,那么我必须增加ts文件中的表单控制。你有更好的解决方案吗?创建动态表单Hanks Eliseo!我一定会应用你的建议,使用FormArray1作为表单数组!
<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>
this.formArray=new FormArray(
this.userJson.map(
()=>new FormControl(null,Validators.required))
);