angular - 如何在 Angular 7 中为 formControl 设置动态值

Question

我有一个拖放式 formBuilder 我们可以使用拖放创建表单所以现在我面临的问题是我在 html 中隐藏了字段 TempleteJson.

这是html代码

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
   <div class="form-group">
     <label>Form Name:</label>
     <input type="text" class="form-group" formControlName="TemplateName" />
   </div>
   <div class="form-group">
     <input type="hidden" class="form-group" formControlName="TemplateJson" />
   </div>
   <div class="form-group">
     <label>CreatedOn:</label>
     <input type="date" class="form-group" formControlName="CreatedOn" />
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

这里是component.ts文件

formBuilder: any;
formData: any;
data: any;

ngOnInit() {
    var id = this.route.snapshot.paramMap.get('id');
    
    this.dataService.GetFormById(+id).subscribe(response => {
        this.data = response['TemplateJson'];
        this.generateForm();
    },
        err => {
            this.generateForm();
    });
    
    initJq();
}

userForm = new FormGroup({
    TemplateName: new FormControl(),
    TemplateJson: new FormControl(),
    CreatedOn: new FormControl(),
});

onSubmit() {
    console.log(this.userForm.value);
    this.dataService.addFormTemplate(this.userForm.value);
}

现在在 this.data 中我有 json，我想在 TemplateJson FormControl 中设置那个 json，所以我该怎么做。

谢谢!

Answer 1

您可以使用 SetValue FormControl 的方法:

setValue():

Sets a new value for the form control.

在你的情况下它会是这样的:

this.userForm.controls['TemplateJson'].setValue(this.data.TemplateJson);

Stackblitz_Demo