FormGroup 错误 TypeError：无法读取未定义的属性“get”

Question

我试图从我的表单中获取值，但收到此错误： 错误类型错误：无法读取未定义的属性“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>

Answer 1

您所做的一切都是正确的，但您还需要构建一个 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);
}

Answer 2

用这个

return this.addMessage.controls['message'].value

欲了解更多信息，您可以在这里玩在Angular形式的官方游乐场上

Answer 3

你可以试试这个：

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

...

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

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

Answer 4

我建议的方法是这样的：

第一：将 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

Answer 5

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;
  }

Answer 6

检查表单名称在 HTML 文件和初始化 formbuilder 组的 Typescript 文件中是否匹配。

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

app.component.html

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

app.component.ts

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

整个FormName应该是统一的。

Answer 7

如果有人仍在解决这个问题，就我而言，有效的方法是添加：

if (this.form) {
 //get function
}

并且代码将假设它只能在存在的情况下获取它。