feat(forms): add autocomplete and scroll to first invalid directive

Author: Ismaestro

README.md

@@ -69,6 +69,8 @@ npm run update           | Update the project dependencies with ng update
 * Angular Pipes
 * Interceptors and Events (Progress bar active, if a request is pending)
 * Modal and toasts (snakbar)!
+* Autocomplete enabled in forms
+* Scroll to first invalid input in forms (directive)
 * Responsive layout (flex layout module)
 * SASS (most common used functions and mixins) and BEM styles
 * Internationalization with ng-translate and ngx-translate-extract. Also use cache busting for translation files with [webpack translate loader](https://github.com/ngx-translate/http-loader#angular-cliwebpack-translateloader-example)

src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.html

@@ -36,29 +36,27 @@ <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.n
 <div id="right">
   <h2 class="header__title">{{ 'createHero' | translate }}</h2>
   <div>
-    <form [formGroup]="newHeroForm" #form="ngForm" (ngSubmit)="createNewHero(newHeroForm.value)">
+    <form [formGroup]="newHeroForm" #form="ngForm" appScrollToFirstInvalid
+          (ngSubmit)="createNewHero(newHeroForm.value)" autocomplete="on">
       <mat-form-field class="input-container">
-        <input matInput type="text"
+        <input matInput name="hname" type="text"
                placeholder="{{'name' | translate}}"
                formControlName="name">
-        <mat-error *ngIf="!newHeroForm.controls.name.valid && newHeroForm.controls.name.touched">
+        <mat-error *ngIf="!newHeroForm.controls.name.valid && form.submitted">
           {{'nameRequired' | translate}}
         </mat-error>
       </mat-form-field>
-
       <mat-form-field class="input-container">
-        <input matInput type="text"
+        <input matInput type="text" name="rname"
                placeholder="{{'realName' | translate}}"
                formControlName="alterEgo">
-        <mat-error *ngIf="!newHeroForm.controls.alterEgo.valid && newHeroForm.controls.alterEgo.touched">
+        <mat-error *ngIf="!newHeroForm.controls.alterEgo.valid && form.submitted">
           {{'realNameRequired' | translate}}
         </mat-error>
       </mat-form-field>
-
-      <button mat-raised-button type="submit" [disabled]="!newHeroForm.valid">
+      <button mat-raised-button type="submit" [disabled]="form.submitted && !newHeroForm.valid">
         {{'create' | translate}}
       </button>
-
       <div *ngIf="error">{{error | translate}}</div>
     </form>
   </div>

src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.ts

@@ -51,14 +51,16 @@ export class HeroesListPageComponent implements OnInit {
   }
 
   createNewHero(newHero: Hero) {
-    this.heroService.createHero(newHero).subscribe((newHeroWithId) => {
-      this.heroes.push(newHeroWithId);
-      this.myNgForm.resetForm();
-    }, (response: Response) => {
-      if (response.status === 500) {
-        this.error = 'errorHasOcurred';
-      }
-    });
+    if (this.newHeroForm.valid) {
+      this.heroService.createHero(newHero).subscribe((newHeroWithId) => {
+        this.heroes.push(newHeroWithId);
+        this.myNgForm.resetForm();
+      }, (response: Response) => {
+        if (response.status === 500) {
+          this.error = 'errorHasOcurred';
+        }
+      });
+    }
   }
 
   seeHeroDetails(hero): void {

src/app/shared/directives/scroll-to-first-invalid.directive.spec.ts

@@ -0,0 +1,62 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ScrollToFirstInvalidDirective} from './scroll-to-first-invalid.directive';
+import {By} from '@angular/platform-browser';
+import {TestsModule} from '../modules/tests.module';
+
+@Component({
+  template: `
+    <form id="test-form" [formGroup]="testForm" appScrollToFirstInvalid>
+      <input id="test-input" type="text" class="input" [formControl]="testForm.controls['someText']">
+      <button id="test-button"
+              form="test-form"
+              (click)="saveForm()">
+      </button>
+    </form>
+  `
+})
+class TestComponent {
+  testForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.testForm = this.formBuilder.group({
+      someText: ['', [Validators.required]]
+    });
+  }
+
+  saveForm() {
+  }
+}
+
+describe('ScrollToFirstInvalidDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      imports: [
+        TestsModule
+      ],
+      declarations: [
+        ScrollToFirstInvalidDirective,
+        TestComponent
+      ]
+    }).createComponent(TestComponent);
+
+    fixture.detectChanges();
+  });
+
+  it('should trigger focus on the input because scroll directive is executed', () => {
+    const form = fixture.debugElement.queryAll(By.directive(ScrollToFirstInvalidDirective));
+    const input = fixture.debugElement.query(By.css('input'));
+    const button = fixture.debugElement.query(By.css('button'));
+
+    expect(form).not.toBeNull();
+    expect(input.nativeElement.classList.contains('ng-untouched')).toBe(true);
+
+    button.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(input.nativeElement.classList.contains('ng-touched')).toBe(true);
+  });
+});

src/app/shared/directives/scroll-to-first-invalid.directive.ts

@@ -0,0 +1,30 @@
+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+import {NgForm} from '@angular/forms';
+import UtilsHelper from '../../shared/helpers/utils.helper';
+
+@Directive({selector: '[appScrollToFirstInvalid]'})
+export class ScrollToFirstInvalidDirective {
+  @Input() formGroup: NgForm;
+
+  constructor(private el: ElementRef) {
+  }
+
+  @HostListener('submit', ['$event'])
+  onSubmit(event) {
+    event.preventDefault();
+
+    if (!this.formGroup.valid) {
+      const formControls = this.formGroup.controls;
+      for (const control in formControls) {
+        if (formControls.hasOwnProperty(control)) {
+          formControls[control].markAsTouched();
+        }
+      }
+
+      const target = this.el.nativeElement.querySelector('.ng-invalid');
+      if (target) {
+        UtilsHelper.scrollToElement(target);
+      }
+    }
+  }
+}

src/app/shared/helpers/utils.helper.ts

@@ -0,0 +1,22 @@
+export const scrollToElement = (element) => {
+  if (element) {
+    const distance = window.pageYOffset - Math.abs(element.getBoundingClientRect().y);
+
+    window.scroll({
+      behavior: 'smooth',
+      left: 0,
+      top: element.getBoundingClientRect().top + window.scrollY - 150
+    });
+
+    setTimeout(() => {
+      element.focus();
+      element.blur(); // Trigger error messages
+      element.focus();
+    }, distance);
+  }
+};
+
+
+export default {
+  scrollToElement
+};

src/app/shared/shared.module.ts

@@ -13,6 +13,7 @@ import {RouterModule} from '@angular/router';
 import {HomePageComponent} from './pages/home-page/home-page.component';
 import {Error404PageComponent} from './pages/error404-page/error404-page.component';
 import {HeroCardComponent} from './components/hero-card/hero-card.component';
+import {ScrollToFirstInvalidDirective} from './directives/scroll-to-first-invalid.directive';
 
 @NgModule({
   imports: [
@@ -31,7 +32,8 @@ import {HeroCardComponent} from './components/hero-card/hero-card.component';
     SearchBarComponent,
     FooterComponent,
     SpinnerComponent,
-    HeroCardComponent
+    HeroCardComponent,
+    ScrollToFirstInvalidDirective
   ],
   exports: [
     CommonModule,
@@ -43,7 +45,8 @@ import {HeroCardComponent} from './components/hero-card/hero-card.component';
     SearchBarComponent,
     FooterComponent,
     SpinnerComponent,
-    HeroCardComponent
+    HeroCardComponent,
+    ScrollToFirstInvalidDirective
   ]
 })