Question

export class ApplyComponent implements OnInit {
    formApply: FormGroup;
    postCodeInput: boolean = true;

    constructor(private fb: FormBuilder) {}
    ngOnInit() {
        this.formApply = this.fb.group({
            firstName: ["", Validators.required],
            currentUKAddress: this.fb.group({
                flat: ["", Validators.required],
                years: ["", Validators.required]
            })
        });
        this.onChanges();
    }

    onChanges(): void {
        ...
    }

我想听听年的变化。无论我在onChanges()里面尝试过什么，我都找不到为什么没有任何作用...... 我试过了：

- this.formApply.get('currentUKAddress.years').valueChanges.subscribe(data => {
            console.log('Form changes', data);
        })

 - this.formApply.controls.currentUKAddress.get('years').valueChanges.subscribe(data => {
            console.log('Form changes', data);
        })



- this.formApply.controls.currentUKAddress.controls['years'].valueChanges.subscribe(data => {
            console.log('Form changes', data);
        })

和其他东西一样。在所有情况下，我得到的是Typescript编译器错误： AbstractControl类型上不存在属性要么 对象可能为空。

Answer 1

由于某些原因，类型检查员无法做出正确的决定。所以Non-null assertion operator（！）来救我了：

this.formApply.get('currentUKAddress.years')!.valueChanges.subscribe(data => {
            console.log('Form changes', data);
        })

就像一个魅力......

Answer 2

您可以这样做。.

this.formApply.get('currentUKAddress').get('years').valueChanges.subscribe(data => {
            console.log('Form changes', data);
        })

Answer 3

ngOnChanges仅对输入/输出变量有用。

如果您想收听文本（？）输入中的更改，则必须执行

<input type="text" formControlName="flat" (input)="flatChangeListener($event)">

在您的TS中

flatChangeListener(event) {
  // event should contain the input value.
}

为另一个人做这个，你很高兴！如果它不是文本输入，请告诉我，(input)在这种情况下会发生变化（例如，对于选择它是(change)）

Answer 4

 const year =  <FormControl>(this.formApply.get('currentUKAddress.years'));
year.valueChanges.subscribe(data => {
            console.log('Form changes', data);
        })

Answer 5

我具有相同的表单结构，并且执行以下操作：

this.formApply.controls.currentUKAddress.valueChanges.subscribe(
 currentUKAddress =>
    {
      console.log("years", currentUKAddress.years) // Here you can check whatever 
                                                   //  value is coming in years.

    }
 )

以上解决方案均不适用于我。所以我听了currentUKAddress而不是直接听了几年。

希望这个想法对某人有帮助。

角度版本：7

侦听嵌套表单组的表单控件内的更改

5 个答案: