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

Question

I am creating a FormGroup with a set of FormControls with an array of objects like this :

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);
 }
}

I have to set Validators.required based on the JSON object. Something like this :

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

How can I achieve that?

Answer 1

试试这个。

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