I received this error: It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.
I tried to rectify this by removing "[(ngModel)]="value"" but this did not work - when an item is selected from the dropdown, the value is not retained.
dropdown.component.html
<form [formGroup]="myForm" class="form-style">
<input
#agInput
id="input-dropdown"
[list-formatter]="autocompleListFormatter"
ngui-auto-complete
type="text"
class="form-control"
formControlName="gridDropdown"
[source]="dropdownData"
value-property-name="id"
display-property-name="name"
placeholder=" Search"
[(ngModel)]="value"
autocomplete="off"
/>
</form>
dropdown.component.ts
export class DropdownComponent implements OnInit, AgEditorComponent {
@Input() name: String;
@ViewChild('agInput', { static: true }) public elm: ElementRef;
public dropdownData = ColumnData[0].cellEditorParams.values;
public myForm: FormGroup;
public value: String;
public oldValue: String;
public selected: Boolean;
public params: ICellEditorParams;
constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}
isPopup(): boolean {
return false;
}
refresh(params: ICellEditorParams) {
params;
this.params.api.refreshCells();
return true;
}
getValue(): String {
if (this.value === '') {
this.value = this.oldValue;
}
console.log('getValue', this.value);
return this.value;
}
agInit(params: ICellEditorParams) {
this.value = params.value;
this.oldValue = this.value;
this.value = '';
return this.value;
}
ngOnInit() {
this.myForm = this.builder.group({
gridDropdown: ''
});
}
// dropdown
autocompleListFormatter = (data: any) => {
let html = `<span>${data.name}</span>`;
return this._sanitizer.bypassSecurityTrustHtml(html);
};
setFocus() {
this.elm.nativeElement.focus();
}
ngAfterViewInit() {
Promise.resolve().then(() => this.setFocus());
}
}