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

Posted

技术标签:

【中文标题】如何在角度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,它通过示例进行了更好的解释。

可以使用patchValuesetValue 来设置或更新响应式表单表单控件值。但是,在某些情况下使用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
       )
    )
  

希望这对某人有所帮助。

【讨论】:

以上是关于如何在角度7中将动态值设置为formControl的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 7 中将初始值和验证设置为 ng 自动完成?

如何在设置或获取之前截取FormControl的值?

如何在角度 2 中将输入值转换为大写(传递给 ngControl 的值)

使用 formcontrol 将数据绑定到角度材料表中的复选框。数据以真假值列表的形式提供

如何在radiogroup中将选中的单选按钮设置为默认值?

在新的 Angular 2 表单中将 NgModel 绑定到 FormControl