在Angular 5中,可以使用表单控件中的setValue()方法来使用变量来修补表单的值。下面是一个代码示例:
在组件的HTML模板中,定义响应式表单:
在组件的Typescript文件中,创建响应式表单并使用变量来修补表单的值:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
myVariable: string = 'Hello World';
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myControl: ''
});
this.myForm.get('myControl').setValue(this.myVariable);
}
}
在上述代码中,我们首先导入了Angular的FormBuilder和FormGroup类,然后在ngOnInit()方法中创建了一个名为myForm的响应式表单。然后,我们使用setValue()方法将myVariable的值修补到表单控件中。
注意:在使用setValue()方法之前,必须先创建表单并获取到相应的控件。