如何在angular2中使用FormControl statusChanges？答案

【问题标题】：How to use FormControl statusChanges in angular2?如何在angular2中使用FormControl statusChanges？
【发布时间】：2020-08-29 22:33:54
【问题描述】：

我是 angular2 的新手，我想在用户在下拉菜单中选择某个值时触发一个函数。所以我尝试实现 FormControl 类的 statusChange 但它没有被触发，

想知道如何以及何时使用 angular2 中的 statusChange 这是我的代码

class policy{
 subCategory: FormControl = new FormControl();
 ngOnInit() {
            this.subCategory.statusChanges.subscribe(
                s => {
                    alert('success');
                }, e => {
                    alert('error');
                }, () => {
                    alert('complete');
                }
            );
        }
}

我认为通过实现 statusChanges，我可以在下拉列表中的每次值更改时触发成功功能，显然它现在正在工作。

更新 1

我已更新plunkr

【问题讨论】：

如果你想知道值的变化，你最好订阅valueChanges而不是statusChanges。 StatusChanges 是关于 pristine, valid, ...
好的，我检查一下再回来，谢谢你的帮助
从 statusChanges 更改为 valueChanges 对我没有任何帮助，我仍然无法触发该功能
如果您可以提供一个允许重现问题的 Plunker，也许有人可以提供帮助。您的问题没有提供足够的信息来诊断问题。您的代码中甚至没有提到下拉菜单。
抱歉耽搁了，我已经更新了plunker:plnkr.co/edit/xT2wUrKsy5vZ6lDniLj6?p=info

标签： angular

【解决方案1】：

正如 cmets 所说，您可能想要valueChanges。但是，对于成千上万通过搜索 statusChanges 的工作原理来到这里的其他人来说，这里是：

this.subCategory.statusChanges.subscribe( (status) => {
  console.log(status); //status will be "VALID", "INVALID", "PENDING" or "DISABLED"
})

The docs 描述这 4 个可能的值如下：

VALID：此控件已通过所有验证检查。

INVALID：此控件至少未通过一项验证检查。

PENDING：此控件正在进行验证检查。

DISABLED：此控件免于验证检查。这些状态值是互斥的，因此控件不能同时有效和无效或无效和禁用。

【讨论】：

我这样做了，但控制台中不断出现错误。无法读取未定义的属性“statusChanges”。我确实有 ViewChild 并在 ngAfterViewInit 中完成了订阅。

【解决方案2】：

在反应式形式中，valueChanges 和 statusChanges 看起来非常相似，但有两个不同的用途。

状态变化

statusChanges 是AbstractControl 的一个属性，每次重新计算控件的验证状态时都会发出一个事件。 is explained in the other answer的状态很少

值变化

valueChanges 是AbstractControl 的一个属性，每当控件的值使用 UI 或以编程方式更改时，它都会发出一个事件。

因此valueChanges 对saving when the form is dirty 等有用。

提示：AbstractControl 的属性意味着您可以将这些事件附加到 FormControl、FormArray 或 FormGroup

示例：组件.html

<form [formGroup]="form">
    <h2 class="text-center">Registration Form</h2>
    <br>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="first Name" formControlName="firstName">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="last Name" formControlName="lastName">
    </div>
    <div class="form-group">
        <input type="email" class="form-control" placeholder="email" formControlName="email">
        <span *ngIf="form.controls['email']?.errors?.required">This field is required</span>
    </div>

    <br>
    <div *ngIf="form.valid">
        Valid form
    </div>
</form>

组件.ts

ngOnInit() {
    this.form = this.fb.group({
        firstName: ['', Validators.required],
        lastName: [''],
        email: ['', Validators.required],
    });

    this.form.valueChanges.subscribe((value) => {
        console.log('valueChanges Form value ' + value);
    });

    this.form.statusChanges.subscribe((status) => {
        console.log('statusChanges Status is ' + status);
    });
}

A detailed comparison can be found here.

【讨论】：