angular 5 ngModelOptions updateOn multipile事件

我希望我的输入模型更新了多个事件:现在,我已经看到angular 5支持一个事件,例如 - [ngModelOptions] = {updateOn:'blur'} .

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

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

soultion

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

  • 我使用[ngModelOptions] = {updateOn:'blur'} - 这将更新模糊模式 .

  • 一旦用户按下回车 - 我将从输入中模糊 . 我使用表单标签上的指令执行此操作:

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

@Directive({

    selector: '[enterEvent]',   

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

})

export class EnterEventDirective {

    constructor() {      

    }  

    onkeydown(event) {     

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

            event.target.blur();

        }

    }

}

回答(1)

3 years ago

为此,您可以使用这样的提交按钮 .

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

因此,当用户按下回车键时,它将触发模糊事件,因为焦点转移到提交按钮 . 如果禁用提交按钮,则无效 .

示例代码:

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