响应式表单中表单控件的动态验证 - Angular 7

Question

我正在创建一个 FormGroup，其中包含一组 FormControls 和一组对象，如下所示：

import { Component, OnInit } from '@angular/core'
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class App implements OnInit {
 formData : Array<{type:string , formFieldName:string , required?: boolean } = [
  {
    type : 'text',
    formFieldName:'field1',
    required : true
  },
  {
    type : 'text',
    formFieldName:'field2',
    required : true
  },{
    type : 'text',
    formFieldName:'field3',
  },
 ];
 ngOnInit() {
    const formFields = this.formData.reduce(
      (formObj, fieldMetaData) => Object.assign(formObj, {
        [fieldMetaData.formFieldName]: new FormControl('' , Validators.required )}), {});
     this.form = new FormGroup(formFields);
 }
}

我必须根据 JSON 对象设置 Validators.required。像这样：

[fieldMetaData.formFieldName]: new FormControl('' , fieldMetaData.required ? Validators.required : null )}), {});

我怎样才能做到这一点？

Answer 1

试试这个。

new FormControl('' , fieldMetaData.required ? [Validators.required] : [])

响应式表单中表单控件的动态验证 - Angular 7

Dynamic Validations for Form Control in Reactive Forms - Angular 7

angular

angular-reactive-forms

angular7