कोणीय 2 क्लिक/इवेंट

Question

के बाद पहले अमान्य इनपुट पर फ़ोकस करें मेरे पास एक अजीब आवश्यकता है और कुछ मदद की उम्मीद कर रहा था।

मुझे बटन पर क्लिक करने के बाद फ़ॉर्म के पहले अमान्य इनपुट पर ध्यान केंद्रित करने की आवश्यकता है (जमा नहीं)। फॉर्म बड़ा है, और इसलिए स्क्रीन को पहले अमान्य इनपुट में स्क्रॉल करने की आवश्यकता है।

यह AngularJS जवाब होगा कि मैं क्या जरूरत है, लेकिन नहीं पता था कि अगर इस तरह का निर्देश कोणीय 2 में जाने का रास्ता होगा:

Set focus on first invalid input in AngularJs form

कोणीय 2 तरीका होगा क्या यह करने के लिए? पूरी सहायताके लिए शुक्रिया!

Answer 1

दुर्भाग्यवश मैं इस समय इसका परीक्षण नहीं कर सकता, इसलिए कुछ बग हो सकते हैं, लेकिन अधिकतर वहां होना चाहिए। बस इसे अपने फॉर्म में जोड़ें।

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

आप AngularMaterial का उपयोग कर रहे हैं, तो MdInputDirective ध्यान देने के() विधि है जो आप सीधे इनपुट क्षेत्र पर ध्यान केंद्रित करने की अनुमति है।

अपने घटक में, बस @ViewChildren एनोटेशन के साथ सभी आदानों के लिए एक संदर्भ मिलता है, इस तरह:

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

फिर, पहले अमान्य इनपुट पर ध्यान केंद्रित करने की स्थापना इस के रूप में सरल है:

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

Answer 3

मैं एक सेवा में इस डाल सलाह देते हैं, मेरे लिए यह इस तरह काम किया:

+०१२३५१६४१०६

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

मुझे नहीं पता कि यह मान्य दृष्टिकोण है या नहीं, लेकिन यह मेरे लिए बहुत अच्छा काम कर रहा है।

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

} 

एचटीएमएल

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

मैं इस में AngularJS सुलभ प्रपत्र निर्देश का दृष्टिकोण मिश्रित में

। सुधार का स्वागत है !!!