FormGroup ERROR TypeError: Cannot read property 'get' of undefined
FormGroup ERROR TypeError: Cannot read property 'get' of undefined
我试图从我的表单中获取一个值,但我收到了这个错误:
错误类型错误:无法读取未定义的属性'get'
addMessage: FormGroup;
get message(){ return this.addMessage.get('message').value}
Html:
<form [formGroup]="addMessage" (ngSubmit)="sendMessage()">
<input formControlName="message" class="input" type="text">
<button type="submit" class="button is-primary">Send</button>
</form>
使用这个
return this.addMessage.controls['message'].value
有关详细信息,您可以 play here 在 angular
中的官方 playground
你可以试试这个:
import { FormControl } from '@angular/forms';
...
addMessage = new FormGroup({
message: new FormControl()
});
get message(){
const messageControl = this.addMessage.controls['message'];
return messageControl.value;
}
您所做的一切都正确,但您还需要构建一个 FormBuilder。
请按照我的方法从表单中获取数据。
html:
<form [formGroup]="WordpressForm">
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput placeholder="Title" [(ngModel)]='title' formControlName='title'>
</mat-form-field>
<div>
<button (click)="save()">Save</button>
</div>
</div>
</form>
ts:
constructor(private fb: FormBuilder) {}
WordpressForm = this.fb.group({
title: ['', [Validators.required]]
});
getTitle() {
return this.WordpressForm.get('title');
}
save() {
const template_Title = this.title;
console.log(template_Title);
}
import { FormGroup, FormControl, Validators } from '@angular/forms';
定义实例
addMessage: FormGroup;
this.addMessage = new FormGroup({
message: new FormControl('', [Validators.required]) });
get getMeassageValue() {
return this.addMessage.get('message').value;
}
我建议的方法是:
首先:将 ReactiveFormsModule 导入提供组件的模块(您要导入具有表单的组件的模块)
其次:将 FormGroup 和 FormBuilder 导入到您的表单组件中
第三:声明将成为您的表单名称的变量,如下所示:
public myFormName: FormGroup;
请注意,我已经为变量指定了 FormGroup 类型。在模板中,您将表单的内容分配给此变量(确保它是 public,而不是私有的),如下所示:
<form [formGroup]="myFormName">
第四:在组件的构造函数中声明一个类型为 "FormBuilder" 的私有变量,例如:
constructor(private readonly formBuilder: FormBuilder)
第五:创建一个 public 方法,它将 'create' 你的反应形式,像这样:
createForm(): void {
this.form = this.formBuilder.group(
{
name: [''],
gender: [''],
birth_date: ['']
},
);
}
确保 属性 名称映射到模板中的 formControlName
。使用“ ”值或您希望它具有的初始值初始化每个 属性(确保它与模板上声明的类型相同)
最后:在组件的构造函数中调用表单创建方法,因此表单将在模板渲染时被实例化。
奖励回合:如果您的表单很简单,请考虑使用模板驱动的表单。响应式表单更健壮,适合在您需要对表单进行更多控制时使用。
在此处阅读更多内容:https://angular.io/guide/reactive-forms
检查表单名称是否在 HTML 文件和初始化 formbuilder 组的 Typescript 文件中匹配。
就我而言,这是唯一的错误。
app.component.html
<form [formGroup]="FormName">
```
```
</form>
app.component.ts
FormName = this.fb.group({
name: [],
age: [],
city: [],
})
FormName 应该统一。
我试图从我的表单中获取一个值,但我收到了这个错误: 错误类型错误:无法读取未定义的属性'get'
addMessage: FormGroup;
get message(){ return this.addMessage.get('message').value}
Html:
<form [formGroup]="addMessage" (ngSubmit)="sendMessage()">
<input formControlName="message" class="input" type="text">
<button type="submit" class="button is-primary">Send</button>
</form>
使用这个
return this.addMessage.controls['message'].value
有关详细信息,您可以 play here 在 angular
中的官方 playground你可以试试这个:
import { FormControl } from '@angular/forms';
...
addMessage = new FormGroup({
message: new FormControl()
});
get message(){
const messageControl = this.addMessage.controls['message'];
return messageControl.value;
}
您所做的一切都正确,但您还需要构建一个 FormBuilder。
请按照我的方法从表单中获取数据。
html:
<form [formGroup]="WordpressForm">
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput placeholder="Title" [(ngModel)]='title' formControlName='title'>
</mat-form-field>
<div>
<button (click)="save()">Save</button>
</div>
</div>
</form>
ts:
constructor(private fb: FormBuilder) {}
WordpressForm = this.fb.group({
title: ['', [Validators.required]]
});
getTitle() {
return this.WordpressForm.get('title');
}
save() {
const template_Title = this.title;
console.log(template_Title);
}
import { FormGroup, FormControl, Validators } from '@angular/forms';
定义实例
addMessage: FormGroup;
this.addMessage = new FormGroup({
message: new FormControl('', [Validators.required]) });
get getMeassageValue() {
return this.addMessage.get('message').value;
}
我建议的方法是:
首先:将 ReactiveFormsModule 导入提供组件的模块(您要导入具有表单的组件的模块)
其次:将 FormGroup 和 FormBuilder 导入到您的表单组件中
第三:声明将成为您的表单名称的变量,如下所示:
public myFormName: FormGroup;
请注意,我已经为变量指定了 FormGroup 类型。在模板中,您将表单的内容分配给此变量(确保它是 public,而不是私有的),如下所示:
<form [formGroup]="myFormName">
第四:在组件的构造函数中声明一个类型为 "FormBuilder" 的私有变量,例如:
constructor(private readonly formBuilder: FormBuilder)
第五:创建一个 public 方法,它将 'create' 你的反应形式,像这样:
createForm(): void {
this.form = this.formBuilder.group(
{
name: [''],
gender: [''],
birth_date: ['']
},
);
}
确保 属性 名称映射到模板中的 formControlName
。使用“ ”值或您希望它具有的初始值初始化每个 属性(确保它与模板上声明的类型相同)
最后:在组件的构造函数中调用表单创建方法,因此表单将在模板渲染时被实例化。
奖励回合:如果您的表单很简单,请考虑使用模板驱动的表单。响应式表单更健壮,适合在您需要对表单进行更多控制时使用。
在此处阅读更多内容:https://angular.io/guide/reactive-forms
检查表单名称是否在 HTML 文件和初始化 formbuilder 组的 Typescript 文件中匹配。
就我而言,这是唯一的错误。
app.component.html
<form [formGroup]="FormName">
```
```
</form>
app.component.ts
FormName = this.fb.group({
name: [],
age: [],
city: [],
})
FormName 应该统一。