Question

我尝试使用json文件创建动态反应形式，但没有与我合作。

这是json文件：

 "inputs":[
    {
      "formcontrol":"email",
      "validation":["required,email"]
    },
    {
      "formcontrol":"password",
      "validation":["required"]
    },
    {
      "formcontrol":"firstname",
      "validation":["required"]
    },
    {
      "formcontrol":"lastname",
      "validation":["required"]
    }
  ]

这是我尝试过的：

for(let input of inputs ) // json data
{
   this.t.push(this.formBuilder.group({
      input.formcontrol: ['', input.validation],
   }));
}

我知道我做的不正确，但是我不知道如何解决这个问题。

Answer 1

您只需按照如下所述的formGroup动态添加formControl-

inputs =[
    {
      "formcontrol":"email",
      "validation":["required,email"]
    },
    ....
  ];

  constructor(private fb: FormBuilder) { }

  ngOnInit(){
    this.SignupForm = this.fb.group({});
    let control = new FormControl('');

    for(let input of this.inputs) {
      this.SignupForm.addControl(input.formcontrol, control);
    } 

    console.log(this.SignupForm.value);
  }

Working Example Snippet

如果需要，您可以参考官方文档here

Answer 2

这里是创建动态表单控件的示例

inputs: any = <json data>;
formGroup: FormGroup = new FormGroup({});

ngOnInit(): void {
    // process json data
    this.inputs.forEach(value => {
        this.formGroup.addControl(
            value.formcontrol, // control name
            new FormControl("", this.getValidators(value.validation))
        );
    });
}

// method that returns angular validators from strings
private getValidators(validatorsList: Array<string>): Array<ValidatorFn> {
    const validators: Array<ValidatorFn> = [];

    // map string validators to angular validators
    validatorsList.forEach((validator: string) => {
        switch (validator) {
           case "required":
               validators.push(Validators.required);
               break;
           case "email":
               validators.push(Validators.email);
               break;
           default:
           break;
        }
    });

    return validators;
}

我还创建了StackBlitz example，请检查控制台以查看结果。

使用JSON文件创建动态反应形式-Angular

2 个答案: