Angular自定义autoFillId指令实现输入框自动填充问题咨询

我来帮你搞定这个自动填充ID的需求！你想要当name输入框和combo下拉框的值变化时，自动把id输入框的值设置为name + "." + combo的格式对吧？我看你已经写了指令的雏形，咱们把它完善一下，让整个流程顺畅起来。

第一步：调整模板代码 #

首先咱们把模板里的控件整理清楚，给id输入框加个模板引用变量，方便后续赋值，同时确保name和combo的双向绑定能正常工作：

<!-- 只读的ID输入框，用#idInput来获取DOM元素 -->
<input matInput name="id" required placeholder="ID" #idInput readonly/>

<!-- NAME输入框，绑定ngModel并加上自定义指令 -->
<input matInput [(ngModel)]="nameValue" name="name" required placeholder="NAME" autoFillId />

<!-- COMBO下拉框，同样绑定ngModel和指令 -->
<mat-form-field>
  <mat-select [(ngModel)]="comboValue" name="combo" required placeholder="COMBO" autoFillId >
    <mat-option value="1">Value 1</mat-option>
    <mat-option value="2">Value 2</mat-option>
  </mat-select>
</mat-form-field>

第二步：完善自定义指令 #

你的指令需要同时监听输入框的input事件和下拉框的change事件，并且在值变化时通知组件更新ID。咱们修改指令代码：

import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[autoFillId]'
})
export class AutoFillDirective {
  // 定义一个输出事件，通知组件值变化了
  @Output() valueUpdated = new EventEmitter<void>();

  constructor(private ngControl: NgControl) {}

  // 监听输入框的input事件
  @HostListener('input') onInputChange() {
    this.valueUpdated.emit();
  }

  // 监听下拉框的change事件
  @HostListener('change') onSelectChange() {
    this.valueUpdated.emit();
  }
}

第三步：组件里处理ID更新逻辑 #

在组件中，我们监听指令发出的valueUpdated事件，然后组合name和combo的值，赋值给ID输入框：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换成你自己的组件选择器
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 双向绑定的name和combo值
  nameValue: string = '';
  comboValue: string = '';

  // 获取ID输入框的DOM引用
  @ViewChild('idInput') idInput!: ElementRef<HTMLInputElement>;

  // 更新ID的方法
  updateId() {
    // 只有当name和combo都有值时才生成ID，也可以根据需求调整逻辑
    if (this.nameValue && this.comboValue) {
      this.idInput.nativeElement.value = `${this.nameValue}.${this.comboValue}`;
    } else {
      this.idInput.nativeElement.value = ''; // 没有值时清空ID框
    }
  }
}

最后别忘了在模板里给两个控件绑定valueUpdated事件：

<input matInput [(ngModel)]="nameValue" name="name" required placeholder="NAME" autoFillId (valueUpdated)="updateId()" />

<mat-form-field>
  <mat-select [(ngModel)]="comboValue" name="combo" required placeholder="COMBO" autoFillId (valueUpdated)="updateId()" >
    <mat-option value="1">Value 1</mat-option>
    <mat-option value="2">Value 2</mat-option>
  </mat-select>
</mat-form-field>

额外优化（可选） #

如果你不想手动绑定事件，也可以在组件里通过valueChanges直接监听ngModel的变化，这样甚至可以省略自定义指令：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  nameValue: string = '';
  comboValue: string = '';

  @ViewChild('idInput') idInput!: ElementRef<HTMLInputElement>;
  @ViewChild('nameModel') nameModel!: NgModel;
  @ViewChild('comboModel') comboModel!: NgModel;

  ngOnInit() {
    // 监听name和combo的值变化
    this.nameModel.valueChanges?.subscribe(() => this.updateId());
    this.comboModel.valueChanges?.subscribe(() => this.updateId());
  }

  updateId() {
    if (this.nameValue && this.comboValue) {
      this.idInput.nativeElement.value = `${this.nameValue}.${this.comboValue}`;
    } else {
      this.idInput.nativeElement.value = '';
    }
  }
}

对应的模板修改成这样：

<input matInput [(ngModel)]="nameValue" name="name" required placeholder="NAME" #nameModel />

<mat-form-field>
  <mat-select [(ngModel)]="comboValue" name="combo" required placeholder="COMBO" #comboModel >
    <mat-option value="1">Value 1</mat-option>
    <mat-option value="2">Value 2</mat-option>
  </mat-select>
</mat-form-field>

这样两种方式都能实现你想要的自动填充效果，看你更喜欢哪种写法啦！

内容的提问来源于stack exchange，提问作者cucuru