Góc 2 Tập trung vào đầu vào không hợp lệ đầu tiên sau khi Nhấp/Sự kiện

Question

Tôi có một yêu cầu kỳ lạ và hy vọng sẽ được trợ giúp.

Tôi cần tập trung vào đầu vào không hợp lệ được tìm thấy đầu tiên của biểu mẫu sau khi nhấp vào nút (không gửi). Biểu mẫu khá lớn và do đó màn hình cần phải cuộn đến đầu vào không hợp lệ đầu tiên.

câu trả lời AngularJS này sẽ là những gì tôi cần, nhưng không biết nếu một chỉ thị như thế này sẽ là con đường để đi trong góc 2:

Set focus on first invalid input in AngularJs form

Điều gì sẽ là 2 cách kiễu góc để làm điều này? Cảm ơn vì sự giúp đỡ!

Answer 1

Rất tiếc, tôi không thể kiểm tra điều này vào lúc này, vì vậy có thể là một vài lỗi, nhưng hầu như nên ở đó. Chỉ cần thêm nó vào biểu mẫu của bạn.

import {Directive, Input, HostListener} from '@angular/core'; 
import {NgForm} from '@angular/forms'; 

@Directive({ selector: '[scrollToFirstInvalid]' }) 
export class ScrollToFirstInvalidDirective { 
    @Input('scrollToFirstInvalid') form: NgForm; 
    constructor() { 
    } 
    @HostListener('submit', ['$event']) 
    onSubmit(event) { 
    if(!this.form.valid) { 
     let target; 
     for (var i in this.form.controls) { 
     if(!this.form.controls[i].valid) { 
      target = this.form.controls[i]; 
      break; 
     } 
     } 
     if(target) { 
     $('html,body').animate({scrollTop: $(target.nativeElement).offset().top}, 'slow'); 
     } 
    } 
    } 
} 

Answer 2

Nếu bạn đang sử dụng AngularMaterial, MdInputDirective có phương thức focus() cho phép bạn tập trung trực tiếp vào trường nhập.

Trong thành phần của bạn, chỉ cần có được một tài liệu tham khảo cho tất cả các đầu vào với @ViewChildren chú thích, như thế này:

@ViewChildren(MdInputDirective) inputs: QueryList<MdInputDirective>;

Sau đó, thiết lập tập trung vào đầu vào không hợp lệ đầu tiên cũng đơn giản như thế này:

this.inputs.find(input => !input._ngControl.valid).focus()

Answer 3

tôi khuyên bạn nên đặt này trong một dịch vụ, đối với tôi nó làm việc như thế này:

if (this.form.valid) { 
    //submit 
} else { 
    let control; 
    Object.keys(this.form.controls).reverse().forEach((field) => { 
    if (this.form.get(field).invalid) { 
     control = this.form.get(field); 
     control.markAsDirty(); 
    } 
    }); 

    if(control) { 
    let el = $('.ng-invalid:not(form):first'); 
    $('html,body').animate({scrollTop: (el.offset().top - 20)}, 'slow',() => { 
     el.focus(); 
    }); 
    } 
} 

Answer 4

Tôi không biết đây có phải là phương pháp hợp lệ hay không nhưng điều này có hiệu quả với tôi.

import { Directive, Input, HostListener, ElementRef } from '@angular/core'; 
import { NgForm } from '@angular/forms'; 
import * as $ from 'jquery'; 

@Directive({ selector: '[accessible-form]' }) 
export class AccessibleForm { 

    @Input('form') form: NgForm; 

    constructor(private el: ElementRef) { 

    } 

    @HostListener('submit', ['$event']) 
    onSubmit(event) { 
     event.preventDefault(); 

     if (!this.form.valid) { 
      let target; 

      target = this.el.nativeElement.querySelector('.ng-invalid') 

      if (target) { 
       $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
       target.focus(); 
      } 
     } 
    } 

} 

Trong HTML

<form [formGroup]="addUserForm" class="form mt-30" (ngSubmit)="updateUser(addUserForm)" accessible-form [form]="addUserForm"></form> 

Tôi đã trộn lẫn cách tiếp cận của angularjs chỉ hình thức tiếp cận trong việc này. Cải tiến được hoan nghênh !!!