valueChanges 尝试抛出对象为空的错误（反应形式）答案

【问题标题】：valueChanges attempt throws error of object being null (reactive forms)valueChanges 尝试抛出对象为空的错误（反应形式）
【发布时间】：2021-08-18 17:06:18
【问题描述】：

Angular 4 问题。

我正在尝试以角度解读反应式表单的某些部分，更具体地说，与反应式表单相关，以响应用户操作。

我想尝试对用户输入执行操作，即从建议列表中进行选择。

因此，在构造函数中，我有 formBuilder 和帮助我构建值的服务，我从中选择一个作为输入字段的值。

问题是，当我想使用 valueChanges 来捕获我输入的值并对其进行处理时，即使我采取了一些预防措施来防止对象为空，我也会收到“对象可能为空”错误。

如：额外条件和之前，实际上在initForm里面定义了myForm（所以肯定不能为null）。

请大家指点一下，谢谢！

  constructor(private formBuilder: FormBuilder, private myService: MyService) {
  }

  ngOnInit() {
    this.initForm(this.formBuilder);
  }


 private initForm(formBuilder: FormBuilder): void {
    this.myForm = formBuilder.group({
      input1: ['', Validators.minLength(3)],
      input2: [{value: '', disabled: true}]
     });

    if (this.myForm) {
      if (this.myForm.get('input1')) {
        this.myForm.get('input1').valueChanges.subscribe(value => console.log(value));
        }
    }

  }

【问题讨论】：

Denys，你的意思是像这样离开它：input1: [{value: ''}], 或input1: [{value: '', disabled: false}], - 我尝试了这两种变体，但我仍然遇到那个空问题。谢谢
它会进入 this.myform 吗？您可以在那里控制台记录您的输入吗？
这在 formBuilder.group 定义中，就像在我上面的代码中一样，我首先按名称将表单控件添加到表单中（在 html 中，我有等效的 formControlName="input1" 等等)。这个表单组定义在 initForm 方法中，在表单组定义之后（从我的代码中可以看出），我引用了表单组，所以它是 null 令人惊讶（不是吗？）
否认，谢谢你的想法。现在我更加惊讶了。所以 console.log(this.myForm);具有预期值，并且在下一行 this.myForm.get('input1').valueChange throws 对象可能为 null
全部预期为 3？输入1，输入2和？

标签： angular angular-reactive-forms

【解决方案1】：

 if (this.myForm) {
      if (this.myForm.get('input1')) {
       const variable = this.myForm.get('input1'); // create a variable 
        variable!.valueChanges.subscribe(value => console.log(value)); // use Non-null assertion operator(used in Typescript 2)
        }
    }

由于编译器无法确定该变量为空，因此我们需要使用非空断言运算符。断言其操作数为非空且未定义。

【讨论】：

百万感谢 Denys。出于某种原因，尽管之前进行了所有检查，但我不得不在我的变量之前添加 // tslint:disable-next-line:no-non-null-assertion!.... 行。我猜是 tslint 错误？现在效果很好。
这不是一个错误，它不会影响您的程序。来自 tslint 的一条规则指出：“使用非空断言取消了严格空检查模式的好处。”他们只是尽可能地健壮
显然不推荐使用这种方式订阅？

【解决方案2】：

也许你应该这样做

let input1 = this.myForm.get('input1');
if (input1 != null) {
    input1.valueChanges.subscribe(value => console.log(value));
}

【讨论】：

Amaya 谢谢你，但不幸的是，即使有这个额外的检查，我也遇到了同样的问题
这没有任何区别，两个语句是相等的。 if (this.myForm.get('input1') != null) 等同于 if (this.myForm.get('input1'))