首页 文章

为什么甚至在我按下“提交”按钮之前验证了Angular Form?

提问于
浏览
1

我有一个Reactive Angular Form . 页面加载时,表格已经检查错误 .

我试图使用滚动到错误指令,以滚动和专注于错误div但形式永远不会到那里它已经验证 .

import { ElementRef, HostBinding, Input } from '@angular/core';
import { Directive } from '@angular/core';

@Directive({ 
    selector: '[scrollTo]'
})

export class ScrollDirective {
  constructor(private elRef:ElementRef) {}

  @HostBinding('hidden') isError:boolean = false; 

  @Input() set scrollTo(cond) {
      console.log(cond);

      this.isError = cond; 
      if(cond) { 
          this.elRef.nativeElement.scrollIntoView();
          this.elRef.nativeElement.focus(); 
        } 
    }

}

这是我检查错误的地方,但它已经被检查,如果我把scrollTo放在外面,它首先滚动到 .

<div class="row">
    <div class="col-md-12">
      <span *ngIf="user.get('email').touched && !user.get('email').valid && !user.get('email').pristine">
        <small [scrollTo] = "user.get('email').valid">Invalid email</small>
      </span>
    </div>
  </div>

Update

现在我正在使用它

<div class="col-md-4" [scrollTo] = "user.get('age').valid">
  <md-input-container>
    <input mdInput type="number" formControlName="age" placeholder="Age" validate-onblur>
  </md-input-container>
</div>

事情是,在提交表单时将显示验证错误,我希望焦点和滚动移动到那里?请帮忙 ?

1 回答

  • 1

    将指令实现移动到输入,以便您可以直接引用它 . 要在开始时停用触发,请设置属性 . 提交表单时直接在模板中更改该属性 . 在指令中使用DoCheck来跟踪输入有效性并触发滚动和焦点:

    HTML:

    <form (submit)="start = user.get('email').valid; onSubmit(); " ....>
    .....
    
    <input  [scrollTo] = "!user.get('email').valid && !start"  ....>
    <span [hidden] = "user.get('email').valid">
        <small>Invalid email</small>
    </span>
    

    Component

    start = true;
    

    Directive:

    export class ScrollDirective implements DoCheck {
      constructor(private elRef:ElementRef) {}
    
      @Input()  scrollTo ;
    
    
      ngDoCheck(){
          if(this.scrollTo) { 
              this.elRef.nativeElement.scrollIntoView();
              this.elRef.nativeElement.focus(); 
            } 
    }
    

    DEMO


    Old answer:

    您正在检查user.get('email') . 触及包装器,在开始时为false,删除整个范围并忽略scrollTo . 将指令移动到实际输入并进行更改

相关问题