Question

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

}

错误

Error: src/app/contact-form/contact-form.component.ts:15:5 - error TS2564: Property 'myForm' has no initializer and is not definitely assigned in the constructor.       
  15     myForm : FormGroup;
           ~~~~~~
 src/app/contact-form/contact-form.component.ts:17:10 - error TS2565: Property 'myForm' is used before being assigned.
    
 17     this.myForm.valueChanges.subscribe(console.log);

Answer 1

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

你可以做两件事：

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

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

Answer 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 中的做法）

Answer 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)   }

Answer 4

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

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

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

错误

4 个答案: