角5 ngModelOptions updateOn多桩事件

Question

我希望用多个事件更新我的输入模型:目前，我已经看到了角5支持一个事件，例如ngModelOptions={updateOn:'blur'}。

我可以有多个，例如:ngModelOptions={updateOn：‘模糊提交’}

我认为这在角1中是支持的。

soultion

我想更新两个事件的模式-模糊和提交：

1. 我使用ngModelOptions={updateOn:' blur '} -这将更新模糊模式。
2. 一旦用户将按回车-我将模糊从输入。我这样做是通过表单标签上的一个指令：

10倍到Itay b.m的指令！！

@Directive({

    selector: '[enterEvent]',   

    host: { '(keypress)': 'onkeydown($event)'}

})

export class EnterEventDirective {

    constructor() {      

    }  

    onkeydown(event) {     

        if (event.key == "Enter") {           

            event.target.blur();

        }

    }

}

Answer 1

为此，您可以像这样使用submit按钮。

<button type="submit" (click)="submitbtn.focus();submit();" #submitbtn>Submit</button>

因此，当用户按enter键时，它将触发模糊事件，因为焦点转移到提交按钮。如果禁用“提交”按钮，则此操作将无效。

样本代码：

    <form #myForm="ngForm">
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" [ngModelOptions]="{updateOn: 'blur'}"
         #spy>
        <br>TODO: remove this: {{spy.className}}
        <br>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name1" name="name1" [ngModelOptions]="{updateOn: 'blur'}"
         #spy1>
        <br>TODO: remove this: {{spy1.className}}
        <br>
        <button type="submit" class="btn btn-success" (click)="submitbtn.focus();submit();" #submitbtn>Submit</button>
        <br> {{output}}
    </form>

角级：

export class AppComponent  {
  model={
    name:"",
    name1:""
  }
  output="";

  submit(){
    this.output=JSON.stringify(this.model);
  }
}