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

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

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

Answer 2

很简单

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

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

angular 2 get FormControl in template as local variable

form-control

angular