FormGroup Directive
interface Model {
firstName: string;
lastName: string;
gender: string;
}
<div modelFormControlDirective
[formControl]="modelFormControl">
<input [formControlName]="'FIRST_NAME'" />
<input [formControlName]="'LAST_NAME'" />
<select [formControlName]="'GENDER'" options="options"/>
</div>
@Component({template: ''})
export class AbstractModelDatatableComponent<T extends Identifiable>
extends AbstractConnectableComponent {
@Input() public model: Model;
public modelFormControl: FormGroup = new FormGroup({});
public ngOnChanges({ model: modelChanges }: SimpleChanges): void {
this.modelFormControl.setValue(model);
}
public handleFormToStoreUpdate(): void {
this.modelFormControl.valueChanges.pipe(
distinctUntilChanged(isEqual),
takeUntil(this.destroy$),
).subscribe(model => {
// Update form to store
});
}
}
@Directive({
selector: '[modelFormControlDirective]',
providers: [
{
provide: ControlContainer,
useFactory: formGroupDirectiveFactory,
deps: [ModelFormControlDirective],
},
],
})
export class ModelFormControlDirective extends AbstractModelFormGroupDirective<Model> implements OnInit {
private readonly firstNameFromControl: FormControl = new FormControl(null);
private readonly lastNameFromControl: FormControl = new FormControl(null);
private readonly genderFromControl: FormControl = new FormControl(null);
constructor(
ngControl: NgControl,
private readonly clearErrorService: ClearErrorService,
) {
super(ngControl);
}
public ngOnInit(): void {
super.ngOnInit();
// add reactive form control manipulation
}
protected initControls(): void {
this.formGroup.addControl('FIRST_NAME', this.firstNameFromControl);
this.formGroup.addControl('LAST_NAME', this.lastNameFromControl);
this.formGroup.addControl('GENDER', this.genderFormControl);
}
protected fromModelToFormGroup({ paidFrom }: Model): void {
this.setControlValueAndProperties(this.paidFromControl, paidFrom);
}
protected fromFormGroupToModel(formGroupValue: any): Partial<Model> {
return {
firstName: asDatatableFieldModel(formGroupValue['FIRST_NAME]),
lastName: asDatatableFieldModel(formGroupValue['FIRST_NAME]),
gender: asDatatableFieldModel(formGroupValue['GENDER]),
};
}
}