如何在角度7中将动态值设置为formControl

Posted 2023-02-18

【中文标题】如何在角度7中将动态值设置为formControl

【英文标题】：How to set dynamic value to formControl in angular 7

【发布时间】：2019-09-02 19:52:59

【问题描述】：

我有一个拖放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 那么我该怎么做呢。

谢谢！

【问题讨论】：

你的 generateForm() 函数在哪里？？

这是反应形式的一些基础知识。您可以在angular.io/guide/reactive-forms

上轻松找到答案

@Robert 问题不在 generateForm() 函数中，我在这里没有提到这个函数，因为我认为提问没有意义

【参考方案1】：

你可以使用FormControl的SetValue方法：

setValue():

为表单控件设置一个新值。

你的情况是这样的：

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

Stackblitz_Demo

【参考方案2】：

我已经回答了一个类似的问题here，它通过示例进行了更好的解释。

可以使用patchValue 和setValue 来设置或更新响应式表单表单控件值。但是，在某些情况下使用patchValue 可能会更好。

patchValue 不需要在参数中指定所有控件来更新/设置表单控件的值。另一方面，setValue 要求填写所有表单控件值，如果您的任何控件未在参数中指定，它将返回错误。

在这种情况下，我们将使用patchValue 来更新userForm 中的值。

如果 TemplateJson 中的属性与 FormControlNames 相同，可以这样简单：

this.userForm.patchValue(this.data) 

如果名字不同，

this.userForm.patchValue(
  property1: this.data.bbb
  property2: this.data.aaa
  .
  .
) 

【讨论】：

在 this.data 我只有 json 我想设置 TempleteJson 和其他来自表单的值。

好的，等一下。您希望何时分配值？

是的，this.data 可能是异步的，所以请检查这种方式

但是表单不是在订阅中生成的吗？

【参考方案3】：

我有一个类似的问题，我在订阅后尝试将“setValues”与“this.class.attribute”一起使用，但出现“无法读取未定义的值”错误。原来你必须在订阅中使用 setValue。

 //My Get method
 getX(): void 
    const id = +this._route
    .snapshot.paramMap.get('id');
    this._xService.getX(id)
    
    //Now my subscribe
    .subscribe(x =>  
      this.x = x;

        //And my setValue inside my subscribe
        this.nameOfYourForm.setValue(
          formAttribute1: this.x.Attribute1,
          //The x attribute should match the name in the API / database and not the name in your class
       )
    )
  

希望这对某人有所帮助。