输入“表单组| null' 不可分配给类型'FormGroup'。类型“null”不可分配给类型“FormGroup”。角11

Question

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

错误 ：

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

2 <form [formGroup]="produitFormGroup">

我的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]

 });

}


  
  
  
  

Answer 1

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

produitFormGroup!: FormGroup;

这是一种明确告诉编译器表达式具有除null或undefined以外的值的方法

Answer 2

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

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

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

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

• 改成。produitFormGroup: FormGroup | null= null;​produitFormGroup!: FormGroup;

• 在这里，非空断言运算符（！）将处理空值和未定义值

查看此链接以查找解决或了解此问题的其他方法。

Answer 3

问题分析

基本上问题是，在该行中<form [formGroup]="produitFormGroup">你应该传递 aFormGroup但你正在传递FormGroup | null所以基本上当 的值为produitFormGroupnull 时，你的代码将会失败，幸运的是打字稿已经为你捕获了这个错误

解决方案

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

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({ ... })返回一个FormGroupso 通过Inference produitFormGroup被分配的类型FormGroup