【问题标题】：Type 'FormGroup | null' is not assignable to type 'FormGroup'. Type 'null' is not assignable to type 'FormGroup'. Angular 11输入'FormGroup | null' 不可分配给类型 'FormGroup'。类型“null”不能分配给类型“FormGroup”。角 11
【发布时间】：2021-06-08 07:47:16
【问题描述】：

我是 Angular 新手，我使用的是 11 版。而且我的 html 文件中的 formGroup 属性有问题。

错误：

'表单组 | null' 不可分配给类型 'FormGroup'。类型“null”不能分配给类型“FormGroup”。

我的 html 代码。

 <form [formGroup]="produitFormGroup">
    <div class="form-group">
        <label>Nom</label>
        <input type="text" class="form-control" formControlName="name">
    </div>
    <div class="form-group">
        <label>Prix</label>
        <input type="text" class="form-control" formControlName="price">
    </div>
    <div class="form-group">
        <label>Quantite</label>
        <input type="text" class="form-control" formControlName="quantity">
    </div>
    <div class="form-group">
        <label>Selected</label>
        <input type="checkbox" formControlName="selected">
    </div>
    <div class="form-group">
        <label>Available</label>
        <input type="checkbox" formControlName="available">
    </div>
    <button class="btn btn-success">Enregistrer</button>
</form>

还有我的ts文件代码：

produitFormGroup: FormGroup | null= null;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {

   this.produitFormGroup = this.fb.group({
   name:["", Validators.required],
   price:[0, Validators.required],
   quantity:[0, Validators.required],
   selected:[true, Validators.required],
   available:[true, Validators.required]

 });

}

【问题讨论】：

您可以删除null 类型声明，问题应该会消失。 produitFormGroup: FormGroup | null= null; 会变成 produitFormGroup: FormGroup;，所以你明白为什么 formGroup 指令只接受 FormGroup 类型的参数，你已经将你的参数声明为 FormGroup 类型“或”null，这就是你看到这个错误的原因。
感谢您的回复，我删除了它，但问题仍然存在....
当我声明 produitFormGroup: FormGroup;我有这个错误：属性 'produitFormGroup' 没有初始化程序，并且没有在构造函数中明确分配
您可以尝试在构造函数中初始化表单吗？而声明，就离开：produitFormGroup: FormGroup;
有效！！谢谢大家....

标签： html angular api angular-reactive-forms

【解决方案1】：

您需要添加！ produitFormGroup 之后的运算符如下：

produitFormGroup!: FormGroup;

这是一种明确告诉编译器表达式具有 null 或 undefined

以外的值的方法

【讨论】：

【解决方案2】：

问题分析

基本上问题在于，在<form [formGroup]="produitFormGroup"> 行中，您应该传递FormGroup，但您传递的是FormGroup | null 所以基本上当produitFormGroup 的值为空时，您的代码将失败，幸运的是打字稿有为您捕获了此错误

解决方案

每当我需要初始化我的表单时，我只需在声明属性时初始化它们，如下所示

produitFormGroup = this.fb.group({
   name:["", Validators.required],
   price:[0, Validators.required],
   quantity:[0, Validators.required],
   selected:[true, Validators.required],
   available:[true, Validators.required]
 });;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {

}

类型呢？

我故意省略了打字。 this.fb.group({ ... }) 返回一个FormGroup 所以Inferance produitFormGroup 被分配类型FormGroup

【讨论】：

【解决方案3】：

如果初始化 FormGroup 不是一个选项（例如，如果它是子组件上的输入属性），则使用 ngIf 语句将通过严格的模板检查：

  <form *ngIf="produitFormGroup" [formGroup]="produitFormGroup">
    ...
  </form>

【讨论】：

【解决方案4】：

实际上在produitFormGroup: FormGroup | null= null; 声明中，您正试图将 null 值 明确分配给 FormGroup，但问题是 TypeScript 的类型检查器不允许此类分配。

解决方案 1：（通过更改空检查标志）

将produitFormGroup: FormGroup | null= null; 更改为produitFormGroup: FormGroup;。
在 tsconfig.json 上将 "strict": true, 更改为 "strict": false,
在这里，TS 编译器类型检查器将永久忽略整个项目的空值和未定义值检查。

解决方案 2（使用 ! 运算符。）[推荐]

将produitFormGroup: FormGroup | null= null; 更改为produitFormGroup!: FormGroup;。
这里，非空断言运算符（！）将处理空和未定义值

【讨论】：