угловые 5 ngModelOptions updateOn для нескольких событий - PullRequest
Новая
       18

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

0 голосов
/ 30 апреля 2018

Я хочу, чтобы моя модель ввода была обновлена ​​более чем одним событием: сейчас я видел, что 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();

        }

    }

}

1 Ответ

0 голосов
/ 18 июля 2018

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

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