Question

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

我可以有多个例子：[ngModelOptions] = {updateOn：'blur submit'}

我认为角度1支持这一点。

soultion

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

我使用[ngModelOptions] = {updateOn：'blur'} - 这将更新模糊模式。
一旦用户按下回车键 - 我将从输入中模糊。我在表单标签上执行了此操作：

10x to Itay b.m for the directive !!

@Directive({

    selector: '[enterEvent]',   

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

})

export class EnterEventDirective {

    constructor() {      

    }  

    onkeydown(event) {     

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

            event.target.blur();

        }

    }

}

Answer 1

为此，您可以像这样使用“提交”按钮。

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

angular 5 ngModelOptions updateOn multipile事件

1 个答案: