检查其中一个formControl是否已损坏或已更改

Question

我想检查我的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，但它不起作用。最好的检查方法是什么？

Answer 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>

Answer 2

试试这个：

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 }

Answer 3

订阅表单.valueChanges

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

堆叠闪电战：https://stackblitz.com/edit/angular-reactive-forms-a5njgf