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

Question

我在 Angular 2 模型驱动表单中使用，当用户离开输入元素时，我想立即更新服务器中的数据（自动保存）。

所以，我的解决方案是使用(blur)事件并将表单控件传递给函数，然后检查dirty属性是否为真，然后更新服务器。

我怎样才能做到这一点？

提前致谢

 <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

很简单

<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

我不知道您所说的用户失去控制是什么意思，但是 Angular 路由器内置了一个名为 CanDeactivate 的功能，它允许您在任何情况下停止导航或执行诸如保存数据之类的操作。

在此处参考示例应用程序 - angular.io/resources/live-examples/router/ts/plnkr.html