How to apply form validation to wijmo flex grid

How to apply form validation to wijmo flex grid

Posted by: mayank.topiwala on 8 August 2019, 1:02 pm EST

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 August 2019, 1:02 pm EST

  Hi,

  As per the requirement, I want to make few columns mandatory in my wijmo flex grid. However, I couldn’t achieve form validation using this approach. I am using ngx-formly in my application to make the reactive forms and as per the validation I make flexgrid columns mandatory using isRequired property but this property doesn’t apply on form validation and user can click on Submit without entering the values in mandatory columns. Can you provide any suggestion ?

  I have tried below approach by Ashwin:

  • “https://stackblitz.com/edit/angular-y34a99”

  This is exactly my requirement I need to disable Submit button until user filled all the required fields, but this approach looks a bit verbose. Do I need to apply formly-form to each of the required field in the template ? I am using below code for wijmo flexgrid which has few required columns:

  <div class="row">
      <div class="col-md-12">
      <wj-flex-grid class="custom-grid" #flex [itemsSource]="data" [allowAddNew]="true" [allowDelete]="true"
        (keydown)="onFlexKeydown(flex,$event)" (initialized)="initializeGrid(flex)">
        <wj-flex-grid-filter #filter></wj-flex-grid-filter>
        <wj-flex-grid-column header="Operator/Branding" binding="airlineOperator" width="*" [minWidth]="minColumnWidth"
          [dataMap]="airlineOperators" [isRequired]="true">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Aircraft Type/Asset Type" binding="assetType" width="*" [minWidth]="minColumnWidth"
          [dataMap]="assetTypes">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Year of Manufacture" binding="yearOfManufacture" width="*"
          [minWidth]="minColumnWidth">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Registration Number" binding="regNo" width="*" [minWidth]="minColumnWidth"
          [isRequired]="true" [maxLength]="10">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Agreed Values" binding="agreedValues" width="*" [minWidth]="minColumnWidth"
          [isRequired]="true">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Addition Date" binding="additionDate" width="*" [minWidth]="minColumnWidth">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Deletion Date" binding="deletionDate" width="*" [minWidth]="minColumnWidth">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Pro Rata Factor" binding="proRataFactor" width="*" [minWidth]="minColumnWidth"
          [isRequired]="true">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="AFV / Average Value" binding="afv" width="*" [minWidth]="minColumnWidth"
          [isRequired]="true">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Pro Rata Seats" binding="proRataSeats" width="*" [minWidth]="minColumnWidth">
        </wj-flex-grid-column>
        <wj-flex-grid-column header="Total Loss Only Value" binding="totalLossOnlyValue" width="*"
          [minWidth]="minColumnWidth" [isRequired]="true">
        </wj-flex-grid-column>
      </wj-flex-grid>
    </div>
  </div>
  

  –
  
  Regards,
  
  Mayank

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 9 August 2019, 6:41 am EST

  Hi Team- any update on this ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 August 2019, 4:39 am EST

  Hi Mayank,

  Sorry for the delayed response.

  Since ngx-formly is a 3rd party library, we cannot control its behavior. So, you will have to create formly field for each of the required columns.

  But, you can also achieve the desired behavior without using ngx-formly. Please refer to the sample below:

  https://stackblitz.com/edit/angular-1vdub5

  ~regards