DropDownList : set and get value with ControlValueAccessor

[Charlotte ROZAN]

Hello,

I have issues with handle dropdownlist with ControlValueAccessor. 
I create a component with a dropdwonlist (with item, value and footer template) and I want to use it in a reactive form.

example : 

 <account-lookup formControlName="counterpart" [dataSource]="counterpartData" showAddAction="true" (addAction)="onAdd()"

   (filtering)="onFiltering($event)"></account-lookup>

my component :

<ejs-dropdownlist #accountLookup id="accountLookup" [dataSource]='dataSource' [value]="accountingAccountDto" (valueChange)="onValueChanged($event)"

    [allowFiltering]='true' (filtering)="onFiltering($event)" [fields]="accountFields"

    [itemTemplate]="accountItemTemplate" [valueTemplate]="accountValueTemplate"

    [footerTemplate]="accountFooterTemplate">

    <ng-template #accountItemTemplate let-data>

        <!--set the value to itemTemplate property-->

        <div class="account__fields_container">

            <div class="field__number">{{ data.number }}</div>

            <div class="field__label">{{ data.label }}</div>

        </div>

    </ng-template>

    <ng-template #accountFooterTemplate let-data="">

        <!--set the value to footerTemplate property-->

        <div *ngIf="showAddAction" class="accountFooter">

            <button ejs-button class="e-outline e-info account-foot-button" type="button" i18n="@@action.ajouter"

                (click)="onClicked()"><i class="fa fa-plus"></i>Ajouter</button>

        </div>

    </ng-template>

    <ng-template #accountValueTemplate let-data>

        <div>{{ data.number }} - {{ data.label }}</div>

    </ng-template>

    <ng-template #noRecordsTemplate>

        <span>Aucun compte</span>

    </ng-template>

</ejs-dropdownlist>

ts file : 

@Component({

  selector: 'account-lookup',

  templateUrl: './account-lookup.component.html',

  styleUrls: ['./account-lookup.component.scss'],

  providers: [

    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AccountLookupComponent), multi: true }

  ]

})

export class AccountLookupComponent implements OnInit, OnDestroy, ControlValueAccessor {

  @Input() public dataSource: AccountingAccount[];

  @Input() public showAddAction: boolean = false;

  @Output() public readonly addAction: EventEmitter<any> = new EventEmitter();

  @Output() public readonly filteringAction: EventEmitter<FilteringEventArgs> = new EventEmitter();

  @Output() public readonly accountChange: EventEmitter<ChangeEventArgs> = new EventEmitter();

  public accountFields: Object = { text: 'number', value: 'number' };

  public accountingAccountDto: AccountingAccount;

  public unsub$: Subject<void> = new Subject();

  constructor() { }

  public ngOnInit(): void {

  }

  public writeValue(value: AccountingAccount): void {

    this.accountingAccountDto = value;

  }

  public registerOnChange(fn: any): void {

    this._onChange = fn;

  }

  public registerOnTouched(fn: any): void {

    this._onTouched = fn;

  }

  public setDisabledState?(isDisabled: boolean): void {

  }

  public onValueChanged(event: AccountingAccount) {

    this.writeValue(event);

    this._onChange(event);

  }

  private _onChange = (value: any) => { };

  private _onTouched = () => { };

......

.......

Issues:
1. In control value accesssor WriteValue method, the property type is a string instead of and object (here and AccountingAccountDto, -> load with dataSource)
2. I have multiple exception : 
     - Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng-pristine': 'true'. Current value: 'false'.
     - errors TypeError: Cannot read property 'number' of undefined -> due to valueTemplate <ng-template #accountValueTemplate let-data>

        <div>{{ data.number }} - {{ data.label }}</div>

    </ng-template>

Can you help me please ? :) 

Best regards,

Charlotte

[Sevvandhi Nagulan]

Hi Charlotte, 

Greetings from Syncfusion support. 

Query 1: In control value accesssor WriteValue method, the property type is a string instead of and object (here and AccountingAccountDto, -> load with dataSource) 

Solution:  

Specify the change event args type as ChangeEventArgs. Refer to the code below, 

onValueChanged(event:ChangeEventArgs){ 

} 

Query 2: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng-pristine': 'true'. Current value: 'false'. 

Solution:  

The cause of the issue is due to manipulating the dom directly. Angular will not detect these changes and react properly always. To get rid of the issue, we suggest detecting the changes explicitly as mentioned below code example.   

  

constructor(private cd: ChangeDetectorRef) {  

  

  }  

  ngAfterViewChecked()  

{  

    this.cd.detectChanges();  

}  

  

Also, please refer the below blogs to now more about this angular issue.  

https://medium.com/better-programming/expressionchangedafterithasbeencheckederror-in-angular-what-why-and-how-to-fix-it-c6bdc0b22787   

https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained  

 

 

Query 3:  errors TypeError: Cannot read property 'number' of undefined -> due to valueTemplate <ng-template #accountValueTemplate let-data> 

Solution:  

We suspect that you have bind the value that not in the datasource. Please ensure once whether you have read the value that available in the datasource. 

Please find the sample from the below link. 

Sample: https://stackblitz.com/edit/angular-xvfxar-5wfh7k?file=app.component.ts 

Regards, 

Sevvandhi N