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);

}