Eckige 2-Fokus auf den ersten ungültige Eingabe nach Click/Event

Habe ich eine seltsame Anforderung und hatte gehofft, für etwas Hilfe.

Brauche ich, um den Fokus auf das erste Gefundene, ungültige Eingabe von einem Formular nach dem Klick auf einen button (nicht submit). Die form ist ziemlich groß, und so die Ansicht zu scrollen, um die ersten ungültige Eingabe.

Diese AngularJS Antwort wäre, was würde ich brauchen, aber nicht wissen, wenn eine Richtlinie wie diese wäre der Weg zu gehen, in den Winkel-2:

Setzen Sie den Fokus auf die erste ungültige Eingabe in AngularJs Formular

Was wäre der Winkel 2 Weg, dies zu tun? Vielen Dank für alle Hilfe!

Dies ist nicht eine sonderbare Voraussetzung. In Formularen mit vielen Feldern ist es Recht benutzerfreundlich zu scrollen, das erste Feld mit Fehler in der Ansicht auf "Absenden". Wenn keine ungültige Felder sind sichtbar, wenn der Benutzer den submit-button drücken, hätten Sie keine Idee, warum nichts passiert.

InformationsquelleAutor Jared Martinez | 2016-12-15

6

Das funktioniert für mich. Nicht die eleganteste Lösung, aber angesichts der Einschränkungen im Winkel-wir sind alle erfahren, die für diese Besondere Aufgabe, es macht den job.
```
scrollTo(el: Element): void {
   if(el) { 
    el.scrollIntoView({ behavior: 'smooth' });
   }
}

scrollToError(): void {
   const firstElementWithError = document.querySelector('.ng-invalid');
   this.scrollTo(firstElementWithError);
}

async scrollIfFormHasErrors(form: FormGroup): Promise <any> {
  await form.invalid;
  this.scrollToError();
}
```
Dieser funktioniert, so dass Sie Ausweichen, manipulieren des DOM. Es geht einfach um das erste element mit .ng-invalid auf der Seite durch die document.querySelector() gibt das erste element in der zurückgegebenen Liste.

, Es zu benutzen:
```
this.scrollIfFormHasErrors(this.form).then(() => {
  //Run any additional functionality if you need to. 
});
```
Ich auch geschrieben das auf Eckige ' s Github-Seite: https://github.com/angular/angular/issues/13158#issuecomment-432275834

InformationsquelleAutor jburtondev

Kann ich leider nicht testen im moment, so könnte noch ein paar bugs, sollte aber vor allem dort.
Nur fügen Sie es Ihrem Formular.

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

Sorry für die späte Antwort, bekomme ich ein test gehen dieses! Vielen Dank für die Hilfe!
Wie können wir dies tun, ohne jquery?
Nun könnte man verschieben, um das element ohne Animation, oder Sie können schreiben Sie Ihre eigene benutzerdefinierte animation-Funktion (oder jemand anderem). So etwas wie dieses (stackoverflow.com/questions/8917921/...)
Dies funktioniert nicht, Ziel.nativeElement ist nicht definiert. Welche version von Winkel-verwenden Sie @Baconbeastnz?
check out this link : stackoverflow.com/questions/39642547/...

InformationsquelleAutor Baconbeastnz

3

Wenn Sie AngularMaterial, die MdInputDirective hat einen Fokus () - Methode, die Ihnen erlauben, um direkt den Fokus auf das Eingabefeld.

In die Komponente, nur ein Verweis auf alle Eingänge mit den @ViewChildren Anmerkungen, wie diese:

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

Dann, die Einstellung, die den Fokus auf das erste ungültige Eingabe ist so einfach wie diese:

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

InformationsquelleAutor Guillaume

Ich weiß nicht, ob das ist Gültiger Ansatz, oder nicht, aber das ist großartig für mich.

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

}

In HTML

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

Habe ich gemischt, der Ansatz von angularjs zugänglichen form-Richtlinie in diesem.
Verbesserungen sind erwünscht!!!

InformationsquelleAutor Devang Naghera

  @HostListener('submit', ['$event'])
  onSubmit(event) {
    event.preventDefault();
      if (!this.checkoutForm.valid) {
        let target;
        target = $('input[type=text].ng-invalid').first();
        if (target) {
            $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow', ()=> {
              target.focus();
            });
        }
      }
   }

InformationsquelleAutor devson

Habe ich eine Eckige Richtlinie um dieses problem zu lösen. Sie können es hier ngx-scroll-to-first-invalid.

Schritte:

1.Installieren Sie das Modul:

npm i @ismaestro/ngx-scroll-to-first-invalid --save

2.Importieren Sie die NgxScrollToFirstInvalidModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';

@NgModule({
    imports: [
        BrowserModule,
        NgxScrollToFirstInvalidModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3.Verwenden Sie die Direktive innerhalb einer form:

<form [formGroup]="testForm" ngxScrollToFirstInvalid>
  <input id="test-input1" type="text" formControlName="someText1">
  <button (click)="saveForm()"></button>
</form>

Hoffe, es hilft!
🙂

InformationsquelleAutor ismaestro

2

Einfache HTML-Lösung.
Wenn Sie nicht brauchen, zu Blättern , einfach den Fokus auf die erste gültige Eingabe, die ich benutze :
```
public submitForm() {
    if(this.form.valid){
        //submit form
    } else {
        let invalidFields = [].slice.call(document.getElementsByClassName('ng-invalid'));
        invalidFields[1].focus();
    }
}
```
Dies ist für Vorlagen form hier. Wir konzentrieren uns auf das zweite element der invalidFields cuz, das erste ist das Formular ungültig zu.

InformationsquelleAutor Rabov

Ich empfehlen, dies in einem Gottesdienst, bei mir funktionierte es so:

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

InformationsquelleAutor Enzo Glauber de Lima

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.