Angular TypeScript 表单失去焦点事件示例

以下是一个示例 Angular TypeScript 代码，在表单中使用失去焦点事件的函数：

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  username: string;

  onBlurUsername() {
    console.log('Username lost focus: ' + this.username);
  }
}

在上面的代码中，我们首先导入了Component，然后定义了一个组件FormComponent。组件中有一个属性username，用来存储用户输入的用户名。同时，还定义了一个函数onBlurUsername()，用来处理失去焦点事件。在这个函数中，我们使用console.log()函数来输出用户名。

接下来，在表单模板中，我们可以使用(blur)事件来调用onBlurUsername()函数。例如：

<input type="text" [(ngModel)]="username" (blur)="onBlurUsername()">

在上面的代码中，我们使用了[(ngModel)]指令来实现双向数据绑定，将用户在输入框中输入的用户名绑定到username属性上。同时，使用(blur)事件来调用onBlurUsername()函数，当用户在输入框中输入完用户名并且再点击其他地方时，就会触发这个事件，从而调用onBlurUsername()函数。

总之，使用失去焦点事件的函数可以帮助我们在表单中实现更好的用户交互体验，让用户在输入完数据后能够及时得到反馈。