在Angular中,我们可以使用patchValue
方法来给表单的不同字段赋值。以下是一个使用不同字段名称补丁值的示例:
首先,在组件中,我们需要引入FormBuilder
来创建表单,然后定义一个表单控件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
firstName: '',
lastName: ''
});
}
patchValues() {
const values = {
fName: 'John',
lName: 'Doe'
};
this.myForm.patchValue({
firstName: values.fName,
lastName: values.lName
});
}
}
在上面的示例中,我们创建了一个myForm
表单,并定义了firstName
和lastName
两个字段。
然后,在patchValues
方法中,我们定义了一个values
对象,其中包含了要补丁的字段名称和值。然后,我们使用patchValue
方法将这些值补丁到表单中的对应字段上。
最后,在模板中,我们可以添加一个按钮,当点击按钮时调用patchValues
方法:
当点击"Patch Values"按钮时,patchValues
方法会将firstName
字段设置为"John",lastName
字段设置为"Doe"。