How to apply form validation to wijmo flex grid

Posted by: mayank.topiwala on 7 August 2019, 7:24 am EST

    • Post Options:
    • Link

    Posted 7 August 2019, 7:24 am 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 ?

    Thanks for your time.



    Regards,

    Mayank

  • Posted 7 August 2019, 5:10 pm EST

    hi Team- any update on this ?

  • Posted 7 August 2019, 8:28 pm EST

    Hi Mayank,

    From what I understand, you wish to disable the submit button unless all of the required columns that are created using the ngx-formly forms are filled. You can do this by using the required property of the FormlyFieldConfig. Please refer to the sample below:

    https://stackblitz.com/edit/angular-y34a99

    Let us know if this was your requirement.

    PS: Please post all of the queries related to wijmo in the wijmo forum.

    Regards,

    Ashwin

  • Posted 7 August 2019, 11:40 pm EST

    Thanks Ashwin, 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="Make & Model" binding="makeModel" width="*" [minWidth]="minColumnWidth"
            [maxLength]="40">
          </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="Serial Number" binding="serialNo" width="*" [minWidth]="minColumnWidth"
            [maxLength]="10">
          </wj-flex-grid-column>
          <wj-flex-grid-column header="Seats" binding="seats" width="*" [minWidth]="minColumnWidth"></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>
    
    
  • Posted 8 August 2019, 4:03 am EST

    [quote=“ashwin.saxena”]

    Hi Mayank,

    From what I understand, you wish to disable the submit button unless all of the required columns that are created using the ngx-formly forms are filled. You can do this by using the required property of the FormlyFieldConfig. Please refer to the sample below:

    https://stackblitz.com/edit/angular-y34a99

    Let us know if this was your requirement.

    PS: Please post all of the queries related to wijmo in the wijmo forum.

    Regards,

    Ashwin

    [/quote]’

    Hi Ashwin,

    I have posted this query on Wijmo forum:

    https://www.grapecity.com/forums/wijmo/how-to-apply-form-validati

  • Posted 12 August 2019, 2:32 pm EST

    Hi Mayank,

    I have replied to this case on the Wijmo forum below:

    https://www.grapecity.com/forums/wijmo/how-to-apply-form-validati

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels