Question

我想根据其他表单值“自动填充”输入。 “id”应为“name”+“”。 +“combo”：

 <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);
}

}

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

我怎么能一起做？

Answer 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

using指令连接两个输入值

1 个答案: