angular 5 ngModelOptions updateOn multipile events

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

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

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

душа

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

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

        }

    }

}

angular angular5 angular2-ngmodel angular-ngmodel
person noah lubko    schedule 30.04.2018    source источник
comment
github.com/angular/angular/issues/20371   -  person yurzui    schedule 30.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Для этого вы можете использовать кнопку отправки вот так.

<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);
  }
}
person Chatar Singh    schedule 18.07.2018