Install

You can install this package with npm.

npm i scroll-focus-to-error --save

USAGE

1.After installing the package, you should import the NgxMatAutocompleteControl module in root module (eg. app.module.ts).

import { ScrollFocusToErrorModule } from 'scroll-focus-to-error';
@NgModule({
  declarations: [
  ],

  imports: [
    NgxMatAutocompleteControlModule,
  ],
  providers: [ScrollFocusToErrorModule],
  bootstrap: [AppComponent]
})

2. Create a new component and use the below coding

HTML Coding

 <form ScrollFocusToError [formGroup]="infoForm" >
    <div>
      <mat-form-field >
        <input matInput placeholder="Application Name" formControlName="applicationName" required>
        <mat-error *ngIf="infoForm?.get('applicationName')?.errors?.required">
       Application Name is required
        </mat-error>
      </mat-form-field>
    </div>
       <div>
      <mat-form-field >
        <mat-select placeholder="User Name"  formControlName="user" required>
          <mat-option *ngFor="let u of user" [value]="u.userId">{{u.userName}}</mat-option>
        </mat-select>
          <mat-error *ngIf="infoForm?.get('user')?.errors?.required">
       User Name is required
        </mat-error>
      </mat-form-field>
    </div>
    <div>
    <button type="submit" (click)="saveDetails()">Save</button>
    </div>
 </form>

Typescript Coding

  userList = []
  infoForm: FormGroup;
 constructor(private formBuilder:FormBuilder){}
 ngOnInit() {
    this.userList = [{ userId: 10, userName: 'Subashini' }, { userId: 3, userName: 'Sriram' }]
    this.infoForm = this.formBuilder.group({
      applicationName:['', Validators.required],
      user: ['', Validators.required],
    });
 }
 saveDetails(){
   if(this.infoForm.valid){
     ...your save Functionality here
   } else {
     this.infoForm.markAllAsTouched();
   }
 }

Working Scenario

ScrollFocusToError - It is the directive used to scroll the cusror to the invalid fields

1. Button Should be inside the form and form should be directed with ScrollFocusToError directive
2. Button type should be submit because the directive is listens only submit hit
3. If button and entry are in different components means you should use form for button with ScrollFocusToError directive

Example:

Component-A

<form ScrollFocusToError >
<button type="submit" (click)="emitSaveDetails()">Save</button>
</form>

 @Output() emitSave = new EventEmitter<any>();
emitSaveDetails(){
  this.emitSave.emit()
}

Component-B

<app-component-a (emitSave)="saveDetails()"></app-component-a>
<form  [formGroup]="infoForm">
<div>
     <mat-form-field >
       <input matInput placeholder="Application Name" formControlName="applicationName" required>
       <mat-error *ngIf="infoForm?.get('applicationName')?.errors?.required">
      Application Name is required
       </mat-error>
     </mat-form-field>
   </div>
      <div>
     <mat-form-field >
       <mat-select placeholder="UserName"  formControlName="user">
         <mat-option *ngFor="let u of user" [value]="u.userId">{{u.userName}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
</form>

 saveDetails(){
   if(this.infoForm.valid){
     ...your save Functionality here
   } else {
     this.infoForm.markAllAsTouched();
   }
 }

ENJOY CODING :sunglasses: :computer: