使用指令连接两个输入值答案

【问题标题】：using directive to join two input value使用指令连接两个输入值
【发布时间】：2018-07-11 13:43:18
【问题描述】：

我想根据其他表单值“自动填充”输入。 “id”应该是“name”+“.” +“组合”：

 <input matInput name="id" required placeholder="ID" #idValue readonly/>
 <input matInput ngModel name="name" required placeholder="NAME" autoFillId /> 
 <mat-form-field>
   <mat-select ngModel 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>

这是我的指令：

@Directive({
  selector: '[autoFillId]'
})

export class AutoFillDirective {

 @Output() idValue: EventEmitter<string> = new EventEmitter();
 value: string = ".";

@HostListener('input', ['$event']) onInputChange($event) {
  this.value = this.value.split(".")[0] + "." + $event.target.value;
  this.idValue.emit(this.value);
}

@HostListener('change', ['$event']) onChange($event) {
  this.value = $event.value + "." + this.value.split(".")[1];
  this.idValue.emit(this.value);
}

}

我的意思是，如果我得到“未定义.2”（如果更改组合）或“myName.undefined”（如果更改输入），它会单独工作。

我怎样才能一起做呢？

【问题讨论】：

你在哪里使用idValue输出？
我忘记了，已编辑
你的模板引用变量#idValue与@Output是如何连接的？

标签： angular angular5 angular-directive

【解决方案1】：

所以，我花了一点时间来测试和调试您的代码，这就是我发现的：

1) 您正在调用指令的 2 个不同实例

您在组合和输入中调用autoFillId，因此它们中的每一个都将具有该指令的不同实例。这意味着它们都有一个不同的 this.value 实例，并且由于两个实例之间永远不会共享该值，因此您将始终只有一侧工作。

2) select 触发输入和更改事件

@HostListener('change', ['$event']) onChange($event) {
  this.value = $event.value + "." + this.value.split(".")[1];
  this.idValue.emit(this.value);
}

这将在单击选择时触发。

@HostListener('input', ['$event']) onInputChange($event) {
  this.value = this.value.split(".")[0] + "." + $event.target.value;
  this.idValue.emit(this.value);
}

这将在选择一个选项时触发。这就是导致undefined 出现的原因。

有多种解决方案可以解决您的问题，如果您想在指令上保留此行为，您必须将更改后的值传递给指令的另一个实例。

<select name="combo" required placeholder="COMBO" [autoFillId]="currentId" (idValue)="getId($event)">
       <option value=1>Value 1</option>  
       <option value=2>Value 2<option>  
<select>

your.component.ts

currentId = "."

getId(event) {
  this.currentId = event;
}

autofill.directive.ts

@Directive({
  selector: '[autoFillId]'
})

export class AutoFillDirective {

  @Output() idValue: EventEmitter<string> = new EventEmitter();
  //This input will load the value of the ID when changed
  @Input('autoFillId') value: string;

  @HostListener('input', ['$event']) onInputChange($event) {
    /* We need to check if the event is triggered by the input or the select
       We can do this by checking the constructor name for example.
    */
    if($event.constructor.name === 'InputEvent') {
      this.value = this.value.split(".")[0] + "." + $event.target.value;
    } else {
      this.value = $event.target.value + "." + this.value.split(".")[1];
    }
    this.idValue.emit(this.value);
  }

}

给你。您可以在此处查看工作示例：StackBlitz

【讨论】：