WjAutoComplete with FormControl set isRequired and isEditable

WjAutoComplete with FormControl set isRequired and isEditable

Posted by: cesar.smerling on 7 January 2020, 11:24 am EST

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 January 2020, 11:24 am EST

  Hello! I have a angular component with the WjAutoComplete inside, this components recive as input the formControl of reactive forms.
  
  The problem that I have is that I set the properties isEditable to false and isRequired to true and still I can edit with the keyboard (delete) and the value is set to null.

  Is there a way to set this values using the formControl from angular?

  
   <wj-auto-complete
                        [id]="input"
                        [isEditable]="false"
  		      [isRequired]="true"
                        [delay]="200"
                        [isAnimated]="false"
                        [displayMemberPath]="displayMemberPath"
                        [placeholder]="placeholder"
                        [itemsSource]="source"
                        [headerPath]="mainMemberPath"
                        [formControl]="control">
  </wj-auto-complete>
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 January 2020, 4:15 am EST

  Hi Cesar,

  You will also need to add a required validator to the FormControl of the AutoComplete control. You will also need to provide an initial value to the FormControl so that it will bind to the AutoComplete control. Please refer to the code snippet below and the sample attached:

  
  // source is the array containing the source of the AutoComplete
  var c1 = new FormControl(this.source[0], Validators.required);
  var _form = new FormGroup({
        c1: c1
  });
  
  

  Regards,
  
  Ashwin

  src.zip

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 8 January 2020, 9:26 am EST

  This seems to work, putting the isEditable to true, not to false.
  
  But now I have a problem with my Form, inside it I have to autocomplete, the source of the second depends on the value of the first. And both values are required to the form be valid.
  
  When the first auto complete is null and then I select a value I receive a form error:

  ScsModelPickerPopupComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘ng-valid: false’. Current value: ‘ng-valid: true’.
  
  at viewDebugError (core.js:28793)
  
  at expressionChangedAfterItHasBeenCheckedError (core.js:28770)
  
  at checkBindingNoChanges (core.js:29758)
  
  at checkNoChangesNodeInline (core.js:44451)
  
  at checkNoChangesNode (core.js:44416)
  
  at debugCheckNoChangesNode (core.js:45377)
  
  at debugCheckRenderNodeFn (core.js:45309)
  
  at Object.eval [as updateRenderer] (ScsModelPickerPopupComponent.html:3)
  
  at Object.debugUpdateRenderer [as updateRenderer] (core.js:45294)
  
  at checkNoChangesView (core.js:44251)

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 2:17 am EST

  Hi Cesar,

  This error is thrown because while running the angular application in development mode, the change detection runs twice for each time it has to detect changes. And if any value in the second cycle is different from the first cycle, then this error is thrown.
  
  There are many different solutions to this issue. Could you please provide me with your code snippet so that I can assist you further?

  ~regards

• 

  cesar.smerling

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 12:41 pm EST

  Hi; I already solved, I have some problems with the concept of smart and dumb components in angular.
  
  Thanks a lot.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 11:45 pm EST

  We are glad that you were able to resolve the issue.

  ~regards