如何在单独的函数(声明、FormGroup和FromControl)中创建表单模型

Question

如何在单独的函数(声明、FormGroup和FromControl(中创建form Model并在ngOnInit中调用它。请帮助我目前正在学习角度，这是我正在学习的基础知识。

export class AppComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl('Sammy'),
email: new FormControl(''),
message: new FormControl('')
});
}

想要this.myForm部分在单独的函数中以及如何调用它。

Answer 1

您可以创建一个函数

messageForm(data:any=null)
{
data={name:'',email:'',message:'',...data}
return new FormGroup({
name: new FormControl(data.name),
email: new FormControl(data.email),
message: new FormControl(data.message)
});
}
//and use
myForm:FormGroup=this.messageForm({name:'sammy'})

如果你愿意，这个函数可以是"；外部"；组件，只需创建为函数并标记为导出即可使用import {messageForm} from '...'导入

export function messageForm(data:any=null){
...
}

并使用

myForm:FormGroup=messageForm({name:'sammy'})

您也可以创建一个类别

export class MessageForm {
form:FormGroup
constructor(data: any = null) {
data = { name: '', email: '', message: '', ...data };
this.form= new FormGroup({
name: new FormControl(data.name),
email: new FormControl(data.email),
message: new FormControl(data.message),
});
}
get value(){
return this.form.value
}
get controls()
{
return this.form.controls
}
get(path:string)
{
return this.form.get(path) as FormControl
}
setValue(path:string,value:any)
{
this.form.get(path).setValue(value)
}
}

你可以使用

myForm = new MessageForm({ name: 'Sammy' });
<form [formGroup]="myForm.form">
<input formControlName="name"/>
<input formControlName="email"/>
<input formControlName="message"/>
</form>

堆叠式

Answer 2

您只需创建一个名为initializeForm的单独函数，然后在ngOnInit内部调用它。像这样。

export class AppComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.initializeForm();
}
initializeForm() {
this.myForm = new FormGroup({
name: new FormControl('Sammy'),
email: new FormControl(''),
message: new FormControl('')
});
}
}

注意：声明不能在函数内部，相反，您可以创建一个单独的类并继承函数和属性

表单类

export class FormClass {
myForm: FormGroup;
initializeForm() {
this.myForm = new FormGroup({
name: new FormControl('Sammy'),
email: new FormControl(''),
message: new FormControl('')
});
}
}

主要成分

export class AppComponent extends FormClass implements OnInit {
constructor() {
super(); // <- very important to call when you inherit
}
ngOnInit() {
this.initializeForm();
}
}

Html

<form [formGroup]="myForm">
<label for="first-name">Name: </label>
<input id="name" type="text" formControlName="name">
<label for="email">Last Name: </label>
<input id="email" type="text" formControlName="email">
<label for="message">Last Name: </label>
<input id="message" type="text" formControlName="message">
</form>

老实说，你最好阅读角度反应形式文档