angular 表单输入身份证号带出姓名

这需要与后端进行交互，通过身份证号查询对应的姓名并返回到前端。可以使用 Angular 的表单控件和服务来实现这个功能。

在表单中添加一个输入框，用于输入身份证号。

<input type="text" [(ngModel)]="idCardNumber" name="idCardNumber" />

在组件中定义一个属性 idCardNumber，用于存储输入的身份证号。

idCardNumber: string;

在表单中添加一个按钮，用于触发查询操作。

<button (click)="search()">查询</button>

在组件中定义一个方法 search，用于查询身份证对应的姓名。

search(): void {
  // 调用服务查询姓名
}

创建一个服务 IdCardService，用于查询身份证对应的姓名。在服务中定义一个方法 getUserNameByIdCardNumber，接收身份证号作为参数，返回对应的姓名。

@Injectable({
  providedIn: 'root'
})
export class IdCardService {
  getUserNameByIdCardNumber(idCardNumber: string): Observable<string> {
    // 调用后端接口查询姓名
    // 返回 Observable<string> 对象
  }
}

在组件中注入 IdCardService，并调用 getUserNameByIdCardNumber 方法查询姓名。

constructor(private idCardService: IdCardService) {}

search(): void {
  this.idCardService.getUserNameByIdCardNumber(this.idCardNumber)
    .subscribe(username => {
      // 将查询到的姓名赋值给组件的属性
    });
}

将查询到的姓名赋值给组件的属性，并在模板中显示。

username: string;

search(): void {
  this.idCardService.getUserNameByIdCardNumber(this.idCardNumber)
    .subscribe(username => {
      this.username = username;
    });
}

<div *ngIf="username">{{ username }}</div>
``