MatFormFieldControl implement is not working - angular5

Question

On dev brach,I have implemented MatFormFieldControl then use it inside mat-form-field . I also pack it (tgz) to use as lib.
On main site there is error said "mat-form-field must contain a MatFormFieldControl." even though it work perfectly on dev.
PS. I'm not english native. Pardon me if I make you confused
how i use it
<mat-form-field>
<ax-mat-time-picker></ax-mat-time-picker>
</mat-form-field>
this is template
<div [formGroup]="parts">
<input matInput type="number" >
<input matInput type="number" >
<input matInput type="number">
<input matInput type="text">
</div>
this is typescript
#Component({
selector: 'ax-mat-time-picker',
exportAs: 'axMatTimePicker',
templateUrl: './time-picker.component.html',
styleUrls: ['./time-picker.component.scss'],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
providers: [
{ provide: MatFormFieldControl, useExisting: AxMatTimePicker },
DecimalPipe
],
host: {
'class': 'ax-mat-time-picker',
'[class.floating]': 'shouldLabelFloat',
'[id]': 'id',
'[attr.aria-describedby]': 'describedBy'
}
})
export class AxMatTimePicker implements MatFormFieldControl<Time>, OnDestroy {...}

Answer 1

I believe your issue is that each of the fields in your form is not bound to data in the TS.
You should change your template to actually use a form and create a formGroup with values that your form values can bind to. You do this with the "formControlName" directive in the HTML and a "FormGroup" object containing "FormControl" elements in the TS.
Don't forget to import "ReactiveFormsModule" in your module.ts and "AbstractControl, FormBuilder, FormControl, FormGroup, FormArray" in your component.ts.
Example:
HTML
<form [formGroup]="form">
<mat-form-field>
<input matInput formControlName="name" placeholder="Name">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="email" placeholder="Email">
</mat-form-field>
</form>
TS
form = new FormGroup({
name: new FormControl(),
email: new FormControl()
});