WjAutoComplete with OData and ng-pristine

WjAutoComplete with OData and ng-pristine

Posted by: chifret on 14 September 2017, 12:07 pm EST

• 

  chifret

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:07 pm EST

  Hi,

  I’ve a remark about WjAutoComplete with OData bound, and control states.

  My page is a basic form, with an autocomplete being loaded from an OData source as soon as the page load.
  
  When the data are loaded (after the ngAfterViewInit then), the input goes dirty.

  Refering to Angular2 doc, those states are meant to track user interactions, so I don’t think it has sense.

  Here’s what I get

  <div ngForm #myform="ngForm">
  	<wj-auto-complete #combo
  					  name="combo"
  					  required
  					  [(ngModel)]="test"
  					  [ngClass]="{'has-error': myform.dirty && combo.selectedValue==null}"
  					  [isRequired]="true"
  					  [isEditable]="false"
  					  [itemsSource]="cvVehicles"
  					  [displayMemberPath]="'Name'"
  					  [selectedValuePath]="'VehicleId'">
  	</wj-auto-complete>
  </div>

  this.cvVehicles = this.oDataService.getVehicles(); // goes dirty
  
  // then I would like to have this also, which I guess could make it dirty too
  this.oDataService.loaded.subscribe(() => { this.cvVehicles.currentItem = null; });
   

  Thanks in advance for your help and opinion.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:07 pm EST

  Hi,
  
  Thank you for reporting this issue. We are able to replicate the issue at our end and it requires further investigation. Hence, this issue has been escalated to the concerned team for further investigation with tracking id 270506.
  
  We will let you know as soon as we get any update on this.

  In the investigation, we found that if control is shown when data is loaded at the client side, dirty value remains to false. Please refer to the following code snippet if you would like to give it a chance:

  <div ngForm #myForm="ngForm">
  
      <div *ngIf="isLoaded">
      <wj-auto-complete name="combo"
                        [isRequired]="true"
                        [isEditable]="false"
                        [(ngModel)]="test"
                        #combo="ngModel"
                        [itemsSource]="data"
                        [displayMemberPath]="'CategoryName'"
                        [selectedValuePath]="'CategoryID'">
      </wj-auto-complete>
      <p>
          AutoComplete State=> dirty:{{combo.dirty}}
      </p>
      </div>
  </div>
  // TS
  export class AppComponent implements OnInit {
      test = null;
      public num1 = 11;
      public data;
      isLoaded = false;
      constructor() {
          let url = 'http://services.odata.org/Northwind/Northwind.svc';
          this.data = new wjOData.ODataCollectionView(url, 'Categories', {
              loaded: (s, e) => {
                  this.isLoaded = true;
              }
          });
          //this.data = [{ CategoryName: 'ABC', CategoryID: 1 }, { CategoryName: 'DEF', CategoryID: 2 }];
      }
  
      ngOnInit() {
      }
  }

  Thanks,
  
  Manish Kumar Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 January 2018, 9:47 am EST

  Hi,
  
  We are sorry for the late reply.

  CollectionView (and ODataCollectionView as well) sets its currentPosition to 0 after its sourceCollection has been assigned (in case of ODataCollectionView it happens right after a data was retrieved from a server). This updates AutoComplete.selectedValue property and dirties model property.

  So the only way to solve this problem is to reset ngModel in the ODataCollectionView.loaded event:

  this.combo.reset(this.combo.value);
  
  , where this.combo is:
  
  @ViewChild(
  
  'combo') combo: NgModel;
  

  Please refer to the updated app.component.ts

  ~Manish

  app.component.zip