1.0.2 • Published 4 years ago
scroll-focus-to-error v1.0.2
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]
})
- 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
- Button Should be inside the form and form should be directed with ScrollFocusToError directive
- Button type should be submit because the directive is listens only submit hit
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>
```typescript
@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: