Angular 表单输入身份证号码自动填充姓名示例代码

以下是一个示例代码，当用户输入身份证号码时，根据身份证号码自动获取姓名并填充到表单中。

HTML代码：

<form>
  <div>
    <label for='idNumber'>身份证号码：</label>
    <input type='text' id='idNumber' name='idNumber' (input)='getUserName($event.target.value)'>
  </div>
  <div>
    <label for='userName'>姓名：</label>
    <input type='text' id='userName' name='userName' [value]='name'>
  </div>
</form>

在上面的代码中，我们使用了 (input) 事件来监听用户输入身份证号码的变化，并调用 getUserName 方法来获取姓名。姓名使用 [value] 绑定到输入框中。

TypeScript代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name: string;
  constructor(private http: HttpClient) {}

  getUserName(idNumber: string): void {
    if (idNumber.length === 18) {
      const url = `https://api.idcardapi.com/api/idcard?key=yourKey&idcard=${idNumber}`;
      this.http.get(url).subscribe((data: any) => {
        this.name = data.name;
      });
    }
  }
}

在 getUserName 方法中，我们通过使用第三方API获取身份证号码对应的姓名。在这个示例中，我们使用了 HttpClient 来发送HTTP请求。获取到姓名后，我们将其赋值给 name 属性，这个属性会绑定到表单中的输入框中，从而实现自动填充姓名的功能。

需要注意的是，我们在 getUserName 方法中做了一些简单的验证来确保用户输入的身份证号码是有效的。