проблема проверки формы после добавления ngx-pagination - Angular 7 - PullRequest
Новая
       38

проблема проверки формы после добавления ngx-pagination - Angular 7

0 голосов
/ 21 марта 2020

Я создал веб-страницу, где я отображаю данные в табличном формате (с editMode и ngx-pagination), перебирая список, как показано ниже:

У меня есть добавлена ​​обязательная проверка поля. При нажатии кнопки «GO», когда на первой странице есть пустое поле, !templateForm.form.valid возвращает true , но в случае других страниц возвращает false

Пожалуйста, предложите, если для проверки требуется какое-либо изменение или другой метод.

HTML: 

<form #templateForm="ngForm">
<table class="table table-bordered table-hover table-light table-striped text-nowrap">
    <thead>
      <tr>
        <th scope="col">
            SR NO
        </th>
        <th scope="col">
            ID
        </th>
        <th scope="col">
            NAME
        </th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let dashboard of dashboards | paginate: { itemsPerPage: 2, currentPage: p };let i = index">
            <td>{{p}}_{{(p*2)+(i-1)}}</td>
            <td *ngIf="editMode">
                <input type="text"  class="form-control" name="id_{{p}}_{{(p*2)+(i-1)}}" style='width:200px' #id="ngModel"  [(ngModel)]="dashboard.id" required/>  
                <div *ngIf="id.errors" class="alert alert-danger">
                    <div *ngIf="id.errors.required ">
                        id is required.
                    </div>
                </div>
            </td>
            <td *ngIf="editMode">
                <input type="text"  class="form-control" name="name_{{p}}_{{(p*2)+(i-1)}}" style='width:200px' #name="ngModel"  [(ngModel)]="dashboard.name"/>  
            </td>
        </tr>
        <tr><td colspan=3><pagination-controls (pageChange)="pageChanged($event)"></pagination-controls></td></tr>
    </tbody>
</table>
<button type="button" (click)="go(templateForm,dashboards)"> GO </button>
</form>

TypeScript: 

import { Component } from '@angular/core';
import { Dashboard } from './dashboard.viewmodel';
import { FileTypeValidator, FileSizeValidator } from 'src/app/validators/file.validator';
declare var jQuery :any;
declare var $ :any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Hello-World';
  public name = 'Bhagyashri';
  p: number = 1;
  editMode:boolean=true;
  isShowError: boolean = false;

  map = new Map<String, number>();
  currYear:number;
  lastYear:number;
  dashboards: Dashboard[] = [
   {
      id: "1",
      name: "Bhagyashri"
   },
   {
      id: "2",
      name: "Priyanka"
   },
   {
    id: "",
    name: "Dhiraj"
   },
   {
    id: "4",
    name: "Tejal"
   },
   {
    id: "5",
    name: "Anurag"
   },
   {
    id: "6",
    name: "Ashwini"
   }
  ];

ngOnInit() {


}

go(templateForm:any,dashboards:Dashboard[])
  {
      if(!templateForm.form.valid)
      {
        this.isShowError=true;
        let target = jQuery('input.ng-invalid').first(); 

        if (target ) 
        {
            jQuery('html,body').animate({ scrollTop: jQuery(target) }, 'slow', () => {
            target.focus();
            let name : string=target.attr('ng-reflect-name');
            let splitted : string[] = name.split("_",2);
            this.p =  +splitted[1];
            this.pageChanged(this.p);
          });
        }
    }
  }

  pageChanged($event)
  {
    this.p = $event;
  }

}
...