Угловые 5 ngModelOptions updateOn нескольких событий

Question

Я хочу, чтобы моя входная модель была обновлена ​​более чем одним событием: сейчас я видел, что angular 5 поддерживает одно событие, например - [ngModelOptions]={updateOn:'blur'}.

Могу ли я иметь более одного, например: [ngModelOptions]={updateOn:'blur submit'}

Я думаю, что это поддерживается в угловых 1.

soultion

Я хочу обновить модал на два события - размытие и отправка:

1. Я использую [ngModelOptions]={updateOn:'blur'} - это обновит модальный режим размытия.
2. Как только пользователь нажмет ввод - я смажу от ввода. Я сделал это с помощью директивы на теге формы:

10x Итай бм за директиву!!

@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>

Поэтому, когда пользователь нажимает клавишу ввода, он запускает событие размытия, поскольку фокус смещается на кнопку отправки. Если кнопка отправки отключена, это не будет работать.

Образец кода:

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