如何在角度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,它通过示例进行了更好的解释。
可以使用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
)
)
希望这对某人有所帮助。
【讨论】:
以上是关于如何在角度7中将动态值设置为formControl的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Angular 7 中将初始值和验证设置为 ng 自动完成?
如何在角度 2 中将输入值转换为大写(传递给 ngControl 的值)