检查 formControl 之一是否脏或已更改答案

【问题标题】：Check if one of formControl is dirty or changed检查 formControl 之一是否脏或已更改
【发布时间】：2020-04-14 10:55:19
【问题描述】：

我想检查我的 formGroup 的 formControlName 之一是否更改了值。由于我有很多 formControl，我想找到一种智能方法来控制其中一个是否被更改。

<div>
    <label class="font-weight-bold">{{ 'questionario_codiceDomanda' | translate }}</label>

    <input formControlName="codDomanda" class="questionario-input-border form-control" type="text"
        (keyup)="changeCodDomanda($event)">
</div>
<!-- testo domanda -->
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-group">
    <label class="font-weight-bold">{{ 'questionario_testo' | translate }}</label>

    <textarea formControlName="testo" class="questionario-input-border form-control" type="text" rows="2" cols="90"
        (keyup)="changeTesto($event)"></textarea>
</div>
<!--help domanda-->
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-group">
    <label class="font-weight-bold">{{ 'questionario_help' | translate }}</label>
    <textarea formControlName="help" class="questionario-input-border form-control" type="text" rows="2"
        cols="90"></textarea>
</div>
</div>

我尝试使用 ngOnChanges，但它不起作用。最好的检查方法是什么？

【问题讨论】：

你想检查哪里？
当有人更改这些输入/文本区域之一时
您是否只检查表单中的某些表单控件或整个表单控件？
整个表单控件，我的目的是在最后显示一个弹出窗口（当用户更改某些表单控件时），当他想要退出时显示消息，表明某些内容已更改，如果想要保存退出前
弹出的逻辑没问题..在其他功能上。但是我想在用户更改某些内容时“捕捉”

标签： angular typescript

【解决方案1】：

试试这个

<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-group">
    <label class="font-weight-bold">{{ 'questionario_help' | translate }}</label>
    <textarea formControlName="help" class="questionario-input-border form-control" type="text" rows="2"
        cols="90"></textarea>
</div>

<span class="help-block error-message" *ngIf="userDataForm.get('help').invalid && userDataForm.get('help').dirty">Error
    in Help</span>

【讨论】：

这并不能解决操作的问题
当用户点击/触摸文本区域时，它会变脏，如果它无效，您将在屏幕上显示“帮助错误”消息。

【解决方案2】：

订阅form.valueChanges

this.form.valueChanges.subscribe(value=>{
    //your logic when any one of form control is dirty
})

Stackblitz：https://stackblitz.com/edit/angular-reactive-forms-a5njgf

【讨论】：

好的，但有一个小问题..如果用户在输入文本上更改了某些内容并且在删除更改后脏参数仍然是 true

【解决方案3】：

试试这个：

const formControlValueChanges = Object.keys(this.form.value).map((key) =>
        this.form.get(key).valueChanges.pipe(map((value) => ({ key, value })))
    );
    merge(...formControlValueChanges).pipe(
        distinctUntilChanged(),
        takeUntil(this.ngUnsubscribe)
    )
        .subscribe(({ key, value }) => { // Logic here }

【讨论】：