如何使用Angular 2检查表单中的更改

Question

我有一个包含少量数据字段和两个按钮的表单.我想仅在用户对表单进行一些更改时才启用按钮.我尝试过使用:

this.form.valueChanges.subscribe(data => console.log('form changes', data));

但是,当表单加载时,最初会检测到更改.有没有其他方法来检查表单中的任何更改.我希望仅在用户对字段进行更改时才调用它,而不是在表单加载时调用.以下是我的html和打字稿代码:

profile.html:

<section>
    <div>
        <form [formGroup]="form">
            <fieldset>
                <div class="panel-group m-l-1 m-r-1 accordion vertical-scroll" id="">
                    <div class="form-group required no-gutter">
                        <label for="firstname"> First Name:</label>
                        <div class="col-md-7 col-lg-6">
                            <input type="text" class="form-control" id="firstname" placeholder="" name="firstname" title="firstname" formControlName="firstname" size="128" aria-required="true" maxlength="35">
                        </div>
                    </div>
                </div>

            </fieldset>
            <div>
                <button class="btn btn-primary" type="button" (click)="save()">Save</button>
                <button class="btn btn-primary" type="button" (click)="cancel()">Cancel</button>
            </div>
        </form>
    </div>
</section>

profile.component.ts:

export class ProfileComponent implements OnInit, AfterViewInit, OnChanges {
    public form: FormGroup;

    constructor(private formBuilder: FormBuilder, private app: Application) {

    }

    loadForm(): void {
        this.form = this.formBuilder.group({
            firstname: [this.app.firstName, Validators.required]
        });
        this.form.valueChanges.subscribe(data => console.log('form changes', data));

    }

    save(): void {

    }

    cancel(): void {

    };

    ngOnInit() {
        this.loadForm();
    }

    ngAfterViewInit() {
        this.loadForm();
    }
}

Answer 1

您可以使用.dirty(或.pristine)值来确定用户是否已使用UI更改控件值:

<button class="btn btn-primary" type="button" (click)="save()" [disabled]="!form.dirty" >Save</button>
<button class="btn btn-primary" type="button" [disabled]="!form.dirty"(click)="cancel()">Cancel</button>

https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html#!#dirty-anchor

dirty:boolean如果用户更改了UI中的值,则控件是脏的.

请注意,对控件值进行编程更改不会将其标记为脏.

touch:boolean一旦用户触发了模糊事件,就会标记触摸控件.

Answer 2

.dirty和.pristine布尔值的问题在于,一旦它们发生变化,它们就不会返回,即使您撤消了所引入的所有更改.我设法通过创建一个监视整个表单中的更改的类来找到解决此问题的方法,并将使用原始表单值检查更改的值.这样,如果撤消用户更改,表单可以返回到pristine,或者可选地在您可以提供和订阅的observable(ReplaySubject)上发出布尔值.

使用将是这样的:

private _formIntactChecker:FormIntactChecker;

constructor(private _fb: FormBuilder) { 

    this._form = _fb.group({
        ...
     });

    // from now on, you can trust the .dirty and .pristine to reset
    // if the user undoes his changes.
    this._formIntactChecker = new FormIntactChecker(this._form);

}

或者,不是重置.pristine/.dirty布尔值,而是可以将类配置为每当表单从完整更改为修改时发出布尔值,反之亦然.一个真正的布尔意味着,表单恢复原样,而假布尔意味着表单不再完整.

这是一个如何使用它的示例:

private _formIntactChecker:FormIntactChecker;

constructor(private _fb: FormBuilder) { 

     this._form = _fb.group({
        ...
     });

     var rs = new ReplaySubject()

     rs.subscribe((isIntact: boolean) => {
        if (isIntact) {
            // do something if form went back to intact
        } else {
            // do something if form went dirty
        }
     })

     // When using the class with a ReplaySubject, the .pristine/.dirty
     // will not change their behaviour, even if the user undoes his changes,
     // but we can do whatever we want in the subject's subscription.
     this._formChecker = new FormIntactChecker(this._form, rs);

}

最后,完成所有工作的班级:

import { FormGroup } from '@angular/forms';
import { ReplaySubject } from 'rxjs';

export class FormIntactChecker {

    private _originalValue:any;
    private _lastNotify:boolean;

    constructor(private _form: FormGroup, private _replaySubject?:ReplaySubject<boolean>) {

        // When the form loads, changes are made for each control separately
        // and it is hard to determine when it has actually finished initializing,
        // To solve it, we keep updating the original value, until the form goes
        // dirty. When it does, we no longer update the original value.

        this._form.statusChanges.subscribe(change => {
            if(!this._form.dirty) {
                this._originalValue = JSON.stringify(this._form.value);
            }
        })

        // Every time the form changes, we compare it with the original value.
        // If it is different, we emit a value to the Subject (if one was provided)
        // If it is the same, we emit a value to the Subject (if one was provided), or
        // we mark the form as pristine again.

        this._form.valueChanges.subscribe(changedValue => {

            if(this._form.dirty) {
                var current_value = JSON.stringify(this._form.value);

                if (this._originalValue != current_value) {
                    if(this._replaySubject && (this._lastNotify == null || this._lastNotify == true)) {
                        this._replaySubject.next(false);
                        this._lastNotify = false;
                    }
                } else {
                    if(this._replaySubject)
                        this._replaySubject.next(true);
                    else
                        this._form.markAsPristine();

                    this._lastNotify = true;
                }
            }
        })
    }

    // This method can be call to make the current values of the
    // form, the new "orginal" values. This method is useful when
    // you save the contents of the form but keep it on screen. From
    // now on, the new values are to be considered the original values
    markIntact() {
        this._originalValue = JSON.stringify(this._form.value);

        if(this._replaySubject)
            this._replaySubject.next(true);
        else
            this._form.markAsPristine();

        this._lastNotify = true;
    }
}

重要提示:注意初始值

该类用于JSON.stringify()快速比较整个formGroup值对象.但是,初始化控件值时要小心.

例如,对于复选框,必须设置将其绑定到布尔值的值.如果使用其他类型,例如"已选中","0","1"等,则比较将无法正常工作.

<input type="checkbox" ... [(ngModel)]="variable"> <!-- variable must be a boolean -->

同样<select>,您必须将其值绑定到字符串,而不是数字:

<select ... [(ngModel)]="variable"> <!-- variable must be a string -->

对于常规文本输入控件,也使用字符串:

<input type="text" ... [(ngModel)]="variable"> <!-- variable must be a string -->

这是一个例子,否则它将无法工作.假设您有一个文本字段,并用整数初始化它.原始值的字符串化将是这样的:

{field1:34,field2:"some text field"}

但是,如果用户将field1更新为其他值并返回到34,则新的stringify将为:

{field:"34",field2:"some text field"}

正如您所看到的,虽然表单没有真正改变,但由于数字34周围的引号,原始值和新值之间的字符串比较将导致错误.

Answer 3

首先使用"NgForm".
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
然后在"onSubmit()"函数上执行此操作 -

onSubmit(myForm: NgForm): void {
  let formControls = myForm.controls;
  if(formControls.firstName.dirty) {
    console.log("It's dirty");
  }
  else {
    console.log("not dirty");
  }
} 

它肯定会奏效.您可以打印整个"myForm",并查看所有可供选择的选项.

Answer 4

我想你可以忽略第一个更改

this.form.valueChanges
.skip(1)
.subscribe(data => console.log('form changes', data));

提示：导入skip运算符