Angular 动态表单控件验证
我有一个表单控件，它是通过带有索引的ngFor生成的Angular 动态表单控件验证,angular,typescript,angular-reactive-forms,Angular,Typescript,Angular Reactive Forms,我有一个表单控件，它是通过带有索引的ngFor生成的 <input formControlName='answerControl{{i}}' type="textbox" name="" value="{{ question.answer }}"> 当我尝试时： <div *ngIf="answerControl{{i}}.valid">Error</div> 错误 我有错误，这是无法做到的 完整TS代码： @Component({
<input formControlName='answerControl{{i}}' type="textbox" name="" value="{{ question.answer }}">
<div *ngIf="answerControl{{i}}.valid">Error</div>
错误
@Component({
selector: 'app-fp-edit-pvq',
templateUrl: './fp-pvq.component.html',
animations: [
trigger('hideShow', [
state('hide', style({
opacity: 0,
height: 0
})),
state('show', style({
opacity: 1,
height: '*'
})),
transition('hide => show', animate('150ms ease-in')),
transition('show => hide', animate('150ms ease-out'))
])
]
})
export class FpPVQ implements OnInit {
constructor( private _pvqStepUp: PVQStepUpService, private _langToggle: ErrorToggleService ) { }
private questions: any;
private lang: string;
private counter: number = 0;
private checkedLimit: number = 5;
private updateMode: boolean = false;
private createMode: boolean = false;
private deadlinePassed: boolean = false;
private pvqForm:FormGroup;
private answer_0:FormControl;
private answer_1:FormControl;
private answer_2:FormControl;
private answer_3:FormControl;
private answer_4:FormControl;
private answer_5:FormControl;
private answer_6:FormControl;
private answer_7:FormControl;
private answer_8:FormControl;
private answer_9:FormControl;
private answer_10:FormControl;
private answer_11:FormControl;
private answer_12:FormControl;
private answer_13:FormControl;
private answer_14:FormControl;
private answer_15:FormControl;
private answer_16:FormControl;
private answer_17:FormControl;
private answer_18:FormControl;
private answer_19:FormControl;
private answerControlArr: Array<FormControl> = [];
private questionsArr: Array<any> = [];
ngOnInit() {
this.lang = document['locale'];
console.log('fpPVQ:: pvqStepUpData --> {}, ', this._pvqStepUp.data);
if(this._pvqStepUp.data != null){
this.questions = this._pvqStepUp.data.pvqs;
this.questions.forEach(object => {
this.questionsArr.push([object.question_EN, object.question_FR, object.answer]);
})
if(this._pvqStepUp.data.deadlinePassed)
this.deadlinePassed = true;
}
this.answer_0 = new FormControl(this.questionsArr[0][2], Validators.required);
this.answer_1 = new FormControl(this.questionsArr[1][2], Validators.required);
this.answer_2 = new FormControl(this.questionsArr[2][2], Validators.required);
this.answer_3 = new FormControl(this.questionsArr[3][2], Validators.required);
this.answer_4 = new FormControl(this.questionsArr[4][2], Validators.required);
this.answer_5 = new FormControl(this.questionsArr[5][2], Validators.required);
this.answer_6 = new FormControl(this.questionsArr[6][2], Validators.required);
this.answer_7 = new FormControl(this.questionsArr[7][2], Validators.required);
this.answer_8 = new FormControl(this.questionsArr[8][2], Validators.required);
this.answer_9 = new FormControl(this.questionsArr[9][2], Validators.required);
this.answer_10 = new FormControl(this.questionsArr[10][2], Validators.required);
this.answer_11 = new FormControl(this.questionsArr[11][2], Validators.required);
this.answer_12 = new FormControl(this.questionsArr[12][2], Validators.required);
this.answer_13 = new FormControl(this.questionsArr[13][2], Validators.required);
this.answer_14 = new FormControl(this.questionsArr[14][2], Validators.required);
this.answer_15 = new FormControl(this.questionsArr[15][2], Validators.required);
this.answer_16 = new FormControl(this.questionsArr[16][2], Validators.required);
this.answer_17 = new FormControl(this.questionsArr[17][2], Validators.required);
this.answer_18 = new FormControl(this.questionsArr[18][2], Validators.required);
this.answer_19 = new FormControl(this.questionsArr[19][2], Validators.required);
this.answerControlArr.push(this.answer_0);
this.answerControlArr.push(this.answer_1);
this.answerControlArr.push(this.answer_2);
this.answerControlArr.push(this.answer_3);
this.answerControlArr.push(this.answer_4);
this.answerControlArr.push(this.answer_5);
this.answerControlArr.push(this.answer_6);
this.answerControlArr.push(this.answer_7);
this.answerControlArr.push(this.answer_8);
this.answerControlArr.push(this.answer_9);
this.answerControlArr.push(this.answer_10);
this.answerControlArr.push(this.answer_11);
this.answerControlArr.push(this.answer_12);
this.answerControlArr.push(this.answer_13);
this.answerControlArr.push(this.answer_14);
this.answerControlArr.push(this.answer_15);
this.answerControlArr.push(this.answer_16);
this.answerControlArr.push(this.answer_17);
this.answerControlArr.push(this.answer_18);
this.answerControlArr.push(this.answer_19);
this.pvqForm = new FormGroup({
answerControl0: this.answer_0,
answerControl1: this.answer_1,
answerControl2: this.answer_2,
answerControl3: this.answer_3,
answerControl4: this.answer_4,
answerControl5: this.answer_5,
answerControl6: this.answer_6,
answerControl7: this.answer_7,
answerControl8: this.answer_8,
answerControl9: this.answer_9,
answerControl10: this.answer_10,
answerControl11: this.answer_11,
answerControl12: this.answer_12,
answerControl13: this.answer_13,
answerControl14: this.answer_14,
answerControl15: this.answer_15,
answerControl16: this.answer_16,
answerControl17: this.answer_17,
answerControl18: this.answer_18,
answerControl19: this.answer_19
});
this.questions.sort((a,b) => {
//This sorts all the entries
if(a.answer > b.answer) return -1;
});
//Determine if Update or Create
if(this._pvqStepUp.data.flow !== 'CREATE'){
this.createMode = true;
this.counter = 0;
} else {
this.updateMode = true;
this.counter = 5;
}
this._langToggle.getLanguage().subscribe(
lang => {
this.lang = lang.toString();
});
}
checkedState(event, checkBox){
if(event.target.checked === true){
if(this.counter < this.checkedLimit){
this.counter++;
} else {
event.target.checked = false;
}
} else if(this.counter > 0){
let index = event.target.name;
console.log('index is ', index);
console.log('Answer Control Array is ', this.answerControlArr);
console.log('Answer control is ', this.answerControlArr[index])
this.counter--;
}
}
onSubmit(pvqForm: any) {
console.log('4176-21 Submitted data --> {}', pvqForm);
console.log(pvqForm._value);
Object.keys(pvqForm._value).map((key) => {
console.log('4176-21 Object Key: ', key, ' Object Value: ', pvqForm._value[key]);
})
}
}
@组件({
选择器：“应用程序fp编辑pvq”，
templateUrl:“./fp pvq.component.html”，
动画：[
触发器（‘隐藏’[
状态（'hide'，样式({
不透明度：0，
身高：0
})),
状态（'show'，风格({
不透明度：1，
高度：'*'
})),
过渡（'hide=>show'，动画（'150ms缓进'），
过渡（'show=>hide'，设置动画（'150ms缓解'））
])
]
})
导出类FpPVQ实现OnInit{
构造函数（private _pvqsteppep:pvqstepperservice，private _langToggle:ErrorToggleService）{}
私人问题：任何；
私人朗：字符串；
专用计数器：编号=0；
私人支票限额：数字=5；
私有updateMode:boolean=false；
私有createMode:boolean=false；
传递的私有死线：布尔值=false；
私人pvqForm:FormGroup；
私有答案0:FormControl；
私有答案_1:FormControl；
私有答案2：FormControl；
私人答案3：FormControl；
私有答案4：FormControl；
私人答案5：FormControl；
私有答案_6：FormControl；
私有答案_7:FormControl；
私人答案8：FormControl；
私人答案9:FormControl；
私人回答(10):FormControl ;；
私人答案11：FormControl；
私人答覆(12):FormControl ;；
私人答覆(13):FormControl ;；
私人答覆(14):FormControl ;；
私人答案15：FormControl；
私人答覆(16):FormControl ;；
私人答覆(17):FormControl ;；
私人答覆18：FormControl；
私人答覆19:FormControl；
专用应答器控制器arr:Array=[]；
私有问题ar:Array=[]；
恩戈尼尼特（）{
this.lang=document['locale']；
log（'fpPVQ:：pvqstepUpdatea-->{}'，this.\u pvqStepUp.data）；
if（this.\u pvqstepp.data！=null）{
this.questions=this.\u pvqstepp.data.pvqs；
this.questions.forEach（object=>{
this.questionsArr.push（[object.question_EN，object.question_FR，object.answer]）；
})
如果（此._pvqstepp.data.deadlinePassed）
this.deadlinePassed=true；
}
this.answer_0=新表单控件（this.questionsArr[0][2]，需要验证程序）；
this.answer_1=新表单控件（this.questionsArr[1][2]，需要验证程序）；
this.answer_2=新表单控件（this.questionsArr[2][2]，需要验证程序）；
this.answer_3=新表单控件（this.questionsArr[3][2]，需要验证程序）；
this.answer_4=新表单控件（this.questionsArr[4][2]，需要验证程序）；
this.answer_5=新表单控件（this.questionsArr[5][2]，需要验证程序）；
this.answer_6=新表单控件（this.questionsArr[6][2]，需要验证程序）；
this.answer_7=新表单控件（this.questionsArr[7][2]，需要验证程序）；
this.answer_8=新表单控件（this.questionsArr[8][2]，需要验证程序）；
this.answer_9=新表单控件（this.questionsArr[9][2]，需要验证程序）；
this.answer_10=新表单控件（this.questionsArr[10][2]，需要验证程序）；
this.answer_11=新表单控件（this.questionsArr[11][2]，需要验证程序）；
this.answer_12=新表单控件（this.questionsArr[12][2]，需要验证程序）；
this.answer_13=新表单控件（this.questionsArr[13][2]，需要验证程序）；
this.answer_14=新表单控件（this.questionsArr[14][2]，需要验证程序）；
this.answer_15=新表单控件（this.questionsArr[15][2]，需要验证程序）；
this.answer_16=新表单控件（this.questionsArr[16][2]，需要验证程序）；
this.answer_17=新表单控件（this.questionsArr[17][2]，需要验证程序）；
this.answer_18=新表单控件（this.questionsArr[18][2]，需要验证程序）；
this.answer_19=新表单控件（this.questionsArr[19][2]，需要验证程序）；
this.answerControlArr.push（this.answer\u 0）；
此.answerControlArr.push（此.answer_1）；
此.answerControlArr.push（此.answer_2）；
此.answerControlArr.push（此.answer_3）；
此.answerControlArr.push（此.answer_4）；
此.answerControlArr.push（此.answer_5）；
此.answerControlArr.push（此.answer_6）；
此.answerControlArr.push（此.answer_7）；
此.answerControlArr.push（此.answer_8）；
此.answerControlArr.push（此.answer_9）；
此.answerControlArr.push（此.answer_10）；
此.answerControlArr.push（此.answer_11）；
此.answerControlArr.push（此.answer_12）；
这个.应答控制按钮（这个.应答按钮13）；
这个.应答器控制arr.推（这个.应答器14）；
此.answerControlArr.push（此.answer_15）；
此.answerControlArr.push（此.answer_16）；
此.answerControlArr.push（此.answer_17）；
这个.应答器控制arr.推（这个.应答器18）；
这个.应答器控制arr.推（这个.应答器19）；
this.pvqForm=新表单组（{
答：这个，
答案1：这个，
答案2：这个，
答案3：这个，
答案4：这个，
答案5：这个，
答案6：这个，
答案7：这个，
答案8：这个，
答案9：这个，
答：这个，
答案11：这个，
@Component({
selector: 'app-fp-edit-pvq',
templateUrl: './fp-pvq.component.html',
animations: [
trigger('hideShow', [
state('hide', style({
opacity: 0,
height: 0
})),
state('show', style({
opacity: 1,
height: '*'
})),
transition('hide => show', animate('150ms ease-in')),
transition('show => hide', animate('150ms ease-out'))
])
]
})
export class FpPVQ implements OnInit {
constructor( private _pvqStepUp: PVQStepUpService, private _langToggle: ErrorToggleService ) { }
private questions: any;
private lang: string;
private counter: number = 0;
private checkedLimit: number = 5;
private updateMode: boolean = false;
private createMode: boolean = false;
private deadlinePassed: boolean = false;
private pvqForm:FormGroup;
private answer_0:FormControl;
private answer_1:FormControl;
private answer_2:FormControl;
private answer_3:FormControl;
private answer_4:FormControl;
private answer_5:FormControl;
private answer_6:FormControl;
private answer_7:FormControl;
private answer_8:FormControl;
private answer_9:FormControl;
private answer_10:FormControl;
private answer_11:FormControl;
private answer_12:FormControl;
private answer_13:FormControl;
private answer_14:FormControl;
private answer_15:FormControl;
private answer_16:FormControl;
private answer_17:FormControl;
private answer_18:FormControl;
private answer_19:FormControl;
private answerControlArr: Array<FormControl> = [];
private questionsArr: Array<any> = [];
ngOnInit() {
this.lang = document['locale'];
console.log('fpPVQ:: pvqStepUpData --> {}, ', this._pvqStepUp.data);
if(this._pvqStepUp.data != null){
this.questions = this._pvqStepUp.data.pvqs;
this.questions.forEach(object => {
this.questionsArr.push([object.question_EN, object.question_FR, object.answer]);
})
if(this._pvqStepUp.data.deadlinePassed)
this.deadlinePassed = true;
}
this.answer_0 = new FormControl(this.questionsArr[0][2], Validators.required);
this.answer_1 = new FormControl(this.questionsArr[1][2], Validators.required);
this.answer_2 = new FormControl(this.questionsArr[2][2], Validators.required);
this.answer_3 = new FormControl(this.questionsArr[3][2], Validators.required);
this.answer_4 = new FormControl(this.questionsArr[4][2], Validators.required);
this.answer_5 = new FormControl(this.questionsArr[5][2], Validators.required);
this.answer_6 = new FormControl(this.questionsArr[6][2], Validators.required);
this.answer_7 = new FormControl(this.questionsArr[7][2], Validators.required);
this.answer_8 = new FormControl(this.questionsArr[8][2], Validators.required);
this.answer_9 = new FormControl(this.questionsArr[9][2], Validators.required);
this.answer_10 = new FormControl(this.questionsArr[10][2], Validators.required);
this.answer_11 = new FormControl(this.questionsArr[11][2], Validators.required);
this.answer_12 = new FormControl(this.questionsArr[12][2], Validators.required);
this.answer_13 = new FormControl(this.questionsArr[13][2], Validators.required);
this.answer_14 = new FormControl(this.questionsArr[14][2], Validators.required);
this.answer_15 = new FormControl(this.questionsArr[15][2], Validators.required);
this.answer_16 = new FormControl(this.questionsArr[16][2], Validators.required);
this.answer_17 = new FormControl(this.questionsArr[17][2], Validators.required);
this.answer_18 = new FormControl(this.questionsArr[18][2], Validators.required);
this.answer_19 = new FormControl(this.questionsArr[19][2], Validators.required);
this.answerControlArr.push(this.answer_0);
this.answerControlArr.push(this.answer_1);
this.answerControlArr.push(this.answer_2);
this.answerControlArr.push(this.answer_3);
this.answerControlArr.push(this.answer_4);
this.answerControlArr.push(this.answer_5);
this.answerControlArr.push(this.answer_6);
this.answerControlArr.push(this.answer_7);
this.answerControlArr.push(this.answer_8);
this.answerControlArr.push(this.answer_9);
this.answerControlArr.push(this.answer_10);
this.answerControlArr.push(this.answer_11);
this.answerControlArr.push(this.answer_12);
this.answerControlArr.push(this.answer_13);
this.answerControlArr.push(this.answer_14);
this.answerControlArr.push(this.answer_15);
this.answerControlArr.push(this.answer_16);
this.answerControlArr.push(this.answer_17);
this.answerControlArr.push(this.answer_18);
this.answerControlArr.push(this.answer_19);
this.pvqForm = new FormGroup({
answerControl0: this.answer_0,
answerControl1: this.answer_1,
answerControl2: this.answer_2,
answerControl3: this.answer_3,
answerControl4: this.answer_4,
answerControl5: this.answer_5,
answerControl6: this.answer_6,
answerControl7: this.answer_7,
answerControl8: this.answer_8,
answerControl9: this.answer_9,
answerControl10: this.answer_10,
answerControl11: this.answer_11,
answerControl12: this.answer_12,
answerControl13: this.answer_13,
answerControl14: this.answer_14,
answerControl15: this.answer_15,
answerControl16: this.answer_16,
answerControl17: this.answer_17,
answerControl18: this.answer_18,
answerControl19: this.answer_19
});
this.questions.sort((a,b) => {
//This sorts all the entries
if(a.answer > b.answer) return -1;
});
//Determine if Update or Create
if(this._pvqStepUp.data.flow !== 'CREATE'){
this.createMode = true;
this.counter = 0;
} else {
this.updateMode = true;
this.counter = 5;
}
this._langToggle.getLanguage().subscribe(
lang => {
this.lang = lang.toString();
});
}
checkedState(event, checkBox){
if(event.target.checked === true){
if(this.counter < this.checkedLimit){
this.counter++;
} else {
event.target.checked = false;
}
} else if(this.counter > 0){
let index = event.target.name;
console.log('index is ', index);
console.log('Answer Control Array is ', this.answerControlArr);
console.log('Answer control is ', this.answerControlArr[index])
this.counter--;
}
}
onSubmit(pvqForm: any) {
console.log('4176-21 Submitted data --> {}', pvqForm);
console.log(pvqForm._value);
Object.keys(pvqForm._value).map((key) => {
console.log('4176-21 Object Key: ', key, ' Object Value: ', pvqForm._value[key]);
})
}
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="container-generic bg-rbc-white">
<div class="row">
<div class="container-generic col-md-12">
<h1>Some Message about PVQS</h1>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
</div>
</div>
<form [formGroup]="pvqForm" (ngSubmit)="onSubmit(pvqForm)" novalidate>
<div *ngFor="let question of questions; let i = index" class="row container-generic">
<div class="col-md-8">
<div class="container-input-checkbox">
<label class="container-flex">
<input #checkBox class="pvq-create-checkbox" type="checkbox" name="{{i}}" (change)="checkedState($event, checkBox)" [checked]="question.answer">
<div class="pvq-create-label">
<div *ngIf="lang == 'en'">
<p>{{ question.question_EN }}</p>
</div>
<div *ngIf="lang == 'fr'">
<p>{{ question.question_FR }}</p>
</div>
</div>
</label>
<label [@hideShow]="checkBox.checked ? 'show' : 'hide'" >Answer
<input minlength=4 formControlName='answerControl{{i}}' type="textbox" name="{{i}}" value="{{ question.answer }}">
<div *ngIf="!{{i}}.valid" class="inline-validation critical">
<p>Error</p>
</div>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button [disabled]="pvqForm.invalid" class="button-primary" aria-label="Continue" type="submit">Continue</button>
<button *ngIf="deadlinePassed" class="button-secondary">Postpone</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<input minlength=4 formControlName='answerControl{{i}}' type="textbox" name="" value="{{ question.answer }}">
<div *ngIf="!pvqForm.controls['answerControl' + i].valid">Error here</div>
export class AppComponent {
questions = [
new FormControl('0'),
new FormControl('1'),
new FormControl('2')
];
pvqForm = new FormGroup({
answerControl0: this.questions[0],
answerControl1: this.questions[1],
answerControl2: this.questions[2],
});
<form [formGroup]="pvqForm" novalidate>
<div *ngFor="let question of questions; let i = index">
<input minlength=4 formControlName='answerControl{{i}}' type="text" name="{{i}}">
<div *ngIf="!pvqForm.controls['answerControl' + i].valid" class="inline-validation critical">
<p>Error</p>
</div>
</div>
</form>
pvqForm.controls['answerControl' + i].touched
<div *ngIf="!pvqForm.controls['answerControl' + i].valid && pvqForm.controls['answerControl' + i].touched" ...>
pvqForm.answerControl0.setValidators(Validators.minLength(4))
this.answer_0 = new FormControl(this.questionsArr[0][2], Validators.required);