添加/刪除自定義驗證器以形成角度8的數組

Question

嗨，我正在嘗試設置/取消可更改的表單數組中不同元素的自定義驗證器，到目前為止，我試圖做的是創建一個switch語句並遍歷所有已設置的輸入類型，以便設置驗證規則，如果不符合該規則，則向用戶發送消息。 我遇到的問題是在設置表格數據之前初始化了表格。

所以我的問題是如何遍歷數組並設置驗證規則。 如果有人可以讓我知道我是否使用switch語句沿正確的方向前進，但是代碼放置在錯誤的位置，或者是否有其他更好的方法，那么這將非常有幫助，謝謝

 export class ReactiveComponent implements OnInit { public form: FormGroup; public fieldList: any; types: Array<any>; formData: any; Param: string; setData: any; formLabelNames: any; get contactFormGroup() { return this.form.get('inputs') as FormArray; } constructor( private route: ActivatedRoute, private fb: FormBuilder, private api: FormService, private notifiy: NotificationService, private auth: AuthService, private router: Router) { } ngOnInit() { this.form = this.fb.group({ name: ['', Validators.compose([Validators.required])], organization: ['', Validators.compose([Validators.required])], inputs: this.fb.array([this.createForm()]) }); this.route.paramMap.subscribe(params => { this.Param = params.get('id'); this.getForm(this.Param); }); // set fieldslist to this field this.fieldList = this.form.get('inputs') as FormArray; } // formgroup createForm(): FormGroup { return this.fb.group({ type: ['', Validators.compose([Validators.required])], name: ['', Validators.compose([Validators.required])], value: ['', this.validators()] }); } getForm(id) { this.api.getForm(id).subscribe( (data: any) => this.setForm(data) ); } getFieldsFormGroup(index): FormGroup { const formGroup = this.fieldList.controls[index] as FormGroup; return formGroup; } getContactsFormGroup(index): FormGroup { const formGroup = this.fieldList.controls[index] as FormGroup; return formGroup; } setForm(data) { const d = data.results; this.setData = d; this.formLabelNames = d[0].fields; this.form.patchValue({ name: [d[0].form_name], organization: [d[0].org], }); this.form.setControl('inputs', this.setExistingFields(d[0].fields)); } setExistingFields(fields: any): FormArray { const formArray = new FormArray([]); this.fieldList = formArray; fields.forEach(f => { formArray.push(this.fb.group({ name: f.name, type: f.type, value: f.value })); }); return formArray; } /* This is where I have tried to create a switch statement but I get a undefined error because the setform function is being called after this one */ validators() { this.formLabelNames.type.forEach((field: any) => { switch (field.type) { case 'email': } }); } submit() { if (this.form.valid) { const formId = this.Param; const local = this.auth.decodePayload(); const userId = local.sub; this.router.navigateByUrl('/dashboard'); this.api.sendForm(this.form.value, formId, userId).subscribe(); this.form.reset(); } else { this.notifiy.showFailure('Form is not valid', 'Error'); } } } 

Answer 1

據我判斷，您有幾個問題：

1. 您沒有在formGroup內部正確初始化formControls和formArray。 它應該看起來像這樣：

  this.form = this.fb.group({ name: new FormControl( "", {validators: [Validators.required]}), organization: new FormControl( "", {validators: [Validators.required]}), inputs: this.fb.array([new FormControl(), new FormControl()]), }); 

此外：當僅由一個formGroup組成的formArray時，使用它的意義是什么？

2. 當然，您可以為任何abstractControl設置驗證器，無論是formControl還是formGroup。 對於數組，它看起來像這樣：

  this.formArray.controls.map((ctrl) => { ctrl.setValidators([Validators.required, Validators.email]); }); 

3. 將方法放在組件類中的哪個位置都沒有關系。 雖然調用該方法肯定很重要！