angular 2在模板中获取FormControl作为局部变量

Question

I use in angular 2 model driven forms,when the user leaves the input element i want update data in server immediately (autosave).

So, my solution is use the (blur) event and pass the form control to a function, then check the dirty property if is true, then update the server.

How can I do this?

Thanks in advance

  <input type="text" formControlName="firstName" [(ngModel)]="contact.firstName" #ctrl=[currentFormControl] (blur)="onBlur(ctrl)" /> 

frm.component.ts:

  onBlur(formControl: FormControl){ if(formControl.dirty){ //update server formControl.reset(); } } 

Answer 1

very simple

<form *ngIf="contactForm" (ngSubmit)="onSubmit()" [formGroup]="contactForm">
    <div class="col-sm-12">
        <div class="form-group col-sm-4">
            <input type="text"
                   formControlName="firstName"
                   [(ngModel)]="contact.firstName"
                   (blur)="onBlur(contactForm.controls['firstName'])"
            />
        </div>

Answer 2

I don't know what you mean by user lost control, but there is functionality built into angular router called CanDeactivate which allows you to stop navigation on any condition or to perform an action like saving data.

Refer sample application here - angular.io/resources/live-examples/router/ts/plnkr.html