angular 5 ngModelOptions updateOn multipile事件-Java 学习之路

我希望我的输入模型更新了多个事件：现在，我已经看到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 回答

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

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

回复于 2024-04-26T02:53:17+08:00

angular 5 ngModelOptions updateOn multipile事件

1 回答

相关问题