FormGroup ERROR TypeError:无法读取未定义的属性'get'

时间:2018-04-23 11:53:51

标签: angular angular-forms

我想从我的表单中获取一个值,我收到此错误:   错误TypeError:无法读取未定义的属性'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>

6 个答案:

答案 0 :(得分:6)

你做的一切都是正确的,但你也需要构建一个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);
}

答案 1 :(得分:2)

使用此

client.login

有关详细信息,您可以play here在角色的官方操场上

答案 2 :(得分:1)

你可以试试这个:

import { FormControl } from '@angular/forms';

...

addMessage = new FormGroup({
    message: new FormControl()
});

get message(){ 
  const messageControl = this.addMessage.controls['message'];
  return messageControl.value;
}

答案 3 :(得分:0)

addMessage: FormGroup;

this.addMessage = new FormGroup({

      message: new FormControl('', [Validators.required])  });


get getMeassageValue() {
    return this.addMessage.get('message').value;
  }

定义实例

^([a-zA-Z]\:)(\\[^\\/:*?<>"|]*(?<![ ]))*(\.[a-zA-Z]{2,6})$

答案 4 :(得分:0)

我建议的方法是这样:

首先:将ReactiveFormsModule导入提供组件的模块(您要导入具有表单的组件的模块)

第二:将FormGroup和FormBuilder导入到表单组件中

第三:声明将是您的表单名称的变量,如下所示: public myFormName: FormGroup;

请注意,我已为变量指定了FormGroup类型。在模板上,您将表单内容分配给该变量(确保它是公共的,而不是私有的),如下所示:

  <form [formGroup]="myFormName">

第四:在组件的构造函数中声明一个类型为“ FormBuilder”的私有变量,例如:

constructor(private readonly formBuilder: FormBuilder)

第五:创建一个公共方法,将“创建”您的反应形式,如下所示:

createForm(): void {
    this.form = this.formBuilder.group(
      {
        name: [''],
        gender: [''],
        birth_date: ['']
      },
    );
  }

确保属性名称在模板中映射了formControlName。用''值或您希望其具有的初始值初始化每个属性(确保它与模板上声明的类型相同)

最后:在组件的构造函数上调用表单创建方法,因此在呈现模板时将实例化表单。

奖金回合:如果您的表单很简单,请考虑使用模板驱动的表单。响应式表单更健壮,可以在需要对表单进行更多控制时使用。

在此处了解更多信息:https://angular.io/guide/reactive-forms

答案 5 :(得分:0)

检查表单名称是否与 HTML 文件和表单生成器组初始化的 Typescript 文件匹配。

就我而言,这是唯一的错误。

app.component.html

<form [formGroup]="FormName">
    ```
    ```
</form>

app.component.ts

FormName = this.fb.group({
    name: [],
    age: [],
    city: [],
})

FormName 应始终统一。