I'm struggling to create a personalized component that includes an input form control. I'm unsure how to properly link the formControl directive and formControlName to the input element within my code. Here is what I have so far:
<div class="input-group">
<input class="form-control form-control-sm"
#code />
<div class="input-group-append">
<button type="button" class="btn btn-sm btn-success"
(click)="search()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
This is the corresponding .ts file
import { Input, Component, forwardRef, OnInit, ViewChild } from '@angular/core';
import { DefaultValueAccessor, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'search-input',
templateUrl: './search-input.component.html',
styleUrls: ['./search-input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchInputComponent),
multi: true
}
]
})
export class SearchInputComponent implements OnInit, ControlValueAccessor {
writeValue(obj: any) {
}
registerOnChange(fn: any) {
//this.valueAccesor.registerOnChange(fn);
}
registerOnTouched(fn: any) {
//this.valueAccesor.registerOnTouched(fn);
}
setDisabledState(isDisabled: boolean) {
//this.valueAccesor.setDisabledState(isDisabled);
}
}
I would like to use it like this:
<search-input formControlName="code">
Or
<search-input formControl="code">
Any assistance or guidance on this matter would be greatly appreciated as I am relatively new to Angular development.