属性“myForm”没有初始值设定项，也没有在构造函数中明确分配答案

【问题标题】：Property 'myForm' has no initializer and is not definitely assigned in the constructor属性“myForm”没有初始值设定项，也没有在构造函数中明确分配
【发布时间】：2021-04-09 09:56:06
【问题描述】：

import { Component, HostListener, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-contact-form',
    templateUrl: './contact-form.component.html',
    styleUrls: ['./contact-form.component.css'],
})

export class ContactFormComponent implements OnInit {

    myForm: FormGroup;
    constructor(private fb: FormBuilder) {
        this.myForm.valueChanges.subscribe(console.log);
    }

    ngOnInit() {}

    createForm() {
        this.myForm = this.fb.group({
            name: ['', Validators.compose([Validators.required, Validators.minLength(3),
                Validators.maxLength(50)
            ])],
            email: ['', Validators.compose([Validators.required, Validators.email])],
            gender: ['', Validators.required],
            terms: ['', Validators.requiredTrue]
        });
    }

}

错误

错误：src/app/contact-form/contact-form.component.ts:15:5 - 错误 TS2564：属性 'myForm' 没有初始化程序，并且未在构造函数中明确分配。 15 myForm：表单组； ~~~~~~ src/app/contact-form/contact-form.component.ts:17:10 - 错误 TS2565：在分配之前使用了属性“myForm”。 17 this.myForm.valueChanges.subscribe(console.log);

【问题讨论】：

标签： angular typescript

【解决方案1】：

默认角度模板现在在tsconfig 文件中将strictPropertyInitialization 设置为true。

你可以做两件事：

应用初始化属性的最佳实践，无论是内联还是在构造函数中
在 tsconfig 文件中禁用 strictPropertyInitialization 标志（不推荐）

信息：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#strict-class-initialization

【讨论】：

谢谢，但类型是我无法初始化的表单组，当我添加时！出现其他错误

【解决方案2】：

该错误与 TypeScript 的 strictPropertyInitialization 有关。可以通过以下方式修复：

  myForm: FormGroup = this.fb.group({
    name: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50)])],
    email: ['', Validators.compose([Validators.required, Validators.email])],
    gender: ['', Validators.required],
    terms: ['', Validators.requiredTrue]
  });

  constructor(private fb: FormBuilder) { }

（实现取自 Angular 的 Reactive Forms Guide，他们在那里提供 live example，这就是他们在 profile-editor.component.ts 中的做法）

【讨论】：

【解决方案3】：

动起来

   this.myForm.valueChanges.subscribe(console.log)

表单创建后

   this.myForm = this.fb.group

因为您尝试在创建表单之前订阅表单

  createForm() {
  this.myForm = this.fb.group({
    name: ['', Validators.compose([Validators.required, Validators.minLength(3), 
Validators.maxLength(50)])],
    email: ['', Validators.compose([Validators.required, Validators.email])],
    gender: ['', Validators.required],
    terms: ['', Validators.requiredTrue]
     });

this.myForm.valueChanges.subscribe(console.log)   }

【讨论】：

谢谢，但此错误仍然存在错误：src/app/contact-form/contact-form.component.ts:15:5 - 错误 TS2564：属性 'myForm' 没有初始化程序并且未明确分配在构造函数中。 15 myForm：表单组； ~~~~~~
但是这个错误表明你没有在 createform 函数中移动 valueChanges。只需在 ngOnit 内部移动并调用 createform 函数

【解决方案4】：

您应该在组件的构造函数中移动createForm() 代码。在你这样做之前this.myForm.valueChanges.subscribe(console.log);

理想情况下，您应该在构造函数中创建表单并将订阅保存在ngOninit()

【讨论】：

谢谢，但问题改成 createtForm()