0.0.3 • Published 2 years ago
ims-custom-form v0.0.3
IMS Custom Field
This Library provides Components, Interfaces and Services to implement Custom Field for any given Form.
Installation
npm i ims-custom-form
Implementation
Import ImsCustomFormModule
into your project.module.ts file
import { ImsCustomFormModule } from 'ims-custom-form';
@NgModule({
declarations: [],
imports: [
ImsCustomFormModule
],
providers: [
],
entryComponents: [
ReactiveFormsModule
]
})
export class RentRoomModule { }
Add ims-custom-form
component on you html file
<div class="form-group">
<ims-custom-form [customFields]="customFields$ | async"></ims-custom-form>
</div>
Add required imports & properties into your component.ts file
import { CustomFieldBase, ImsCustomFormComponent } from 'ims-custom-form';
@Component({
selector: 'app-room-form',
templateUrl: './room-form.component.html',
styleUrls: ['./room-form.component.scss']
})
export class RoomFormComponent implements OnInit, OnChanges {
@ViewChild(ImsCustomFormComponent) customForm : ImsCustomFormComponent;
customFields$: Observable<CustomFieldBase<any>[]>;
ngOnInit() {
this.customFields$ = this.getQuestions();
}
getCustomFieldsWithValue() {
return this.ApiService.getCustomFields(this.id).pipe(map((x) => {
var customFields: CustomFieldBase<any>[] = []
x.result.forEach(element => {
customFields.push(new CustomFieldBase<any>().deserialize(element));
});
return customFields;
}));
}
submit(rooms) {
if (!this.form.valid) {
this.isSubmitting = true;
return;
}
this.isSubmitted = true;
this.isLoader = true;
const fd = {
mode: this.mode === 'Create' ? 'New' : 'Edit',
Rooms: {
RoomNo: rooms.RoomNo,
RoomArea: rooms.RoomArea,
Floor: rooms.Floor,
Building: rooms.Building,
Status: rooms.Status ? 1 : 0,
// add values from custom form into CustomValues property of payload model
CustomValues : this.customForm.getValues(this.id)
}
};
let url;
if (this.mode === 'Create') {
url = this.rentRoom.postRentRoom(fd);
} else {
url = this.rentRoom.updateRentRoom(fdd);
}
url.subscribe((response: any) => {
this.isSubmitted = false;
this.isLoader = false;
this.router.navigate(['/rent-room']);
const successData = {
type: 'success',
message: response && response.message ? response.message : `Rate Room ${this.mode} Successfully`
};
this.snackBarService.openSnackBar(successData);
}, error => {
this.headingError(error);
});
}
}
Add a Service method in your Api Service
import { CustomFieldBase, FunctionResponse } from 'ims-custom-form/lib/custom-field-base';
getCustomFields(id: any): Observable<FunctionResponse<CustomFieldBase<any>[]>> {
const options = { headers: this.authService.getRequestOption(), method: 'post' };
var param = { EntityName: "room", EntityId : id }
return this.http.post<FunctionResponse<CustomFieldBase<any>[]>>(`${this.apiUrl}/GetRoomCustomFields`, param, options);
}