family details changed to other family details : kdk

This commit is contained in:
dineshkumarkannan 2018-12-17 18:53:49 +05:30
parent 805039c78f
commit 61884e4b92
2 changed files with 447 additions and 408 deletions

View File

@ -1,11 +1,12 @@
<form class="address" [formGroup]="familyForm">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left" style="padding: 10px !important;">
{{pageTitle}}
</div>
<div fxFlex="30" align="end" style="padding: 10px !important;">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>
<div fxFlex="70" align="left" style="padding: 10px !important;">
{{pageTitle}}
</div>
<div fxFlex="30" align="end" style="padding: 10px !important;">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right"
mat-dialog-close><mat-icon>close</mat-icon></button>
</div>
</h2>
<mat-dialog-content>
@ -18,57 +19,172 @@
<!-- <mat-card-title>Address Details</mat-card-title> -->
<mat-card-content>
<mat-form-field>
<!--<mat-form-field>
<input matInput placeholder="Number Of Family Members" formControlName="members" required>
</mat-form-field>
<mat-card>
</mat-form-field>-->
<div>
<mat-form-field>
<mat-select placeholder="Select a person" formControlName="selected_person" required>
<mat-option value="{{person.id}}" *ngFor="let person of selectPerson">
{{person.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<h5>Residence Details</h5>
<mat-form-field>
<input matInput placeholder="Place" formControlName="residence_place" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="City" formControlName="residence_city" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="State" formControlName="residence_state" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Pin" formControlName="residence_pin" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Number of yrs" formControlName="residence_No_of_years" type="number" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Ownership" formControlName="residence_ownership" required>
<mat-option value="{{ownerShip.id}}" *ngFor="let ownerShip of ownerShipData">
{{ownerShip.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="familyForm.get('residence_ownership').value == 4">
<input matInput placeholder="Please specify" formControlName="ownershipOther">
</mat-form-field>
<mat-form-field *ngIf="familyForm.get('residence_ownership').value == 3">
<input matInput placeholder="Rent Amount" formControlName="rent">
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput placeholder="Number of Family Members" formControlName="total_number_of_family_members" (focusout)="getNumberOfFamilyMemberDetails()"
type="number" max='20' min='1'>
</mat-form-field>
</div>
<div>
<div formArrayName="family_members_details">
<div *ngFor="let item of familyForm.controls.family_members_details['controls']; let i=index" [formGroupName]="i">
<mat-card>
<div>
<mat-form-field>
<input matInput placeholder="Name" formControlName="family_member_name" required>
</mat-form-field>
<!--<mat-form-field>
<input matInput placeholder="Relationship" formControlName="family_member_relationship" required>
</mat-form-field>-->
<mat-form-field>
<mat-select placeholder="Relationship" formControlName="family_member_relationship" required>
<mat-option value="{{relation.relationship_id}}" *ngFor="let relation of relationData">
{{relation.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" formControlName="family_member_age" required>
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-select placeholder="Earning Status" formControlName="family_member_earning_status" required>
<mat-option value="{{earnings.id}}" *ngFor="let earnings of earningStatus">
{{earnings.type}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="item.get('family_member_earning_status').value == 1">
<!--<pre>{{ customerSegData | json}}</pre>-->
<mat-form-field>
<mat-select placeholder="Segment" formControlName="earning_segment" required>
<mat-option value="{{segment.customer_segment_id}}" *ngFor="let segment of customerSegData">
{{segment.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Income Per Month" formControlName="earning_gross_income_per_month" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name of the Employer/Business" formControlName="earning_name_of_the_employer_or_business" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="No. of years in Employer/Business" formControlName="earning_number_of_years_in_employment_or_business"
required>
</mat-form-field>
</div>
<div *ngIf="item.get('family_member_earning_status').value == 2">
<mat-form-field>
<mat-select placeholder="Occupation" formControlName="non_earning_occupation" required>
<mat-option value="{{occupation.occupation_non_earning_member_id}}" *ngFor="let occupation of occupationData">
{{occupation.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="item.get('non_earning_occupation').value==9">
<input matInput placeholder="Specify Others" formControlName="non_earning_if_others" required>
</mat-form-field>
<mat-form-field *ngIf="item.get('non_earning_occupation').value==3">
<input matInput placeholder="Retired From" formControlName="non_earning_if_retired_from" type="date" required>
</mat-form-field>
</div>
</mat-card>
</div>
</div>
</div>
<!--<mat-card>
<mat-card-header>
<p>Earning Members
</p>
</mat-card-header>
<div formArrayName="earningMembers">
<div *ngFor="let item of familyForm.controls.earningMembers['controls']; let i=index"
[formGroupName]="i">
<div *ngFor="let item of familyForm.controls.earningMembers['controls']; let i=index" [formGroupName]="i">
<mat-card-content class="matcards">
<mat-form-field>
<input matInput placeholder="Name"
formControlName="earning_member_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" (keypress)="keyPress($event)"
formControlName="earning_member_age" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name" formControlName="earning_member_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" (keypress)="keyPress($event)" formControlName="earning_member_age" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Relation" formControlName="relation" required>
<mat-option value="{{relations.relationship_id}}"
*ngFor="let relations of relationData">
<mat-option value="{{relations.relationship_id}}" *ngFor="let relations of relationData">
{{relations.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Segment" formControlName="segment" required>
<mat-option value="{{cusSeg.customer_segment_id}}"
*ngFor="let cusSeg of customerSegData">
{{cusSeg.name}}
</mat-option>
<mat-option value="{{cusSeg.customer_segment_id}}" *ngFor="let cusSeg of customerSegData">
{{cusSeg.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Income / Revenue"
formControlName="income" required>
<input matInput placeholder="Income / Revenue" formControlName="income" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name of Employer / Business"
formControlName="employer_name" required>
<input matInput placeholder="Name of Employer / Business" formControlName="employer_name" required>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button *ngIf="i==0" color="primary"
matTooltip="Add More Earning Members" matTooltipPosition="above" (click)="addearningMembers()">
<button type="button" mat-raised-button mat-icon-button *ngIf="i==0" color="primary" matTooltip="Add More Earning Members"
matTooltipPosition="above" (click)="addearningMembers()">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button
matTooltip="Delete" matTooltipPosition="above" (click)="deleteEarningMembers(i)" *ngIf="i>0">
<button type="button" mat-raised-button mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="deleteEarningMembers(i)"
*ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
@ -81,217 +197,180 @@
</p>
</mat-card-header>
<div formArrayName="nonEarningMembers">
<div *ngFor="let members of familyForm.controls.nonEarningMembers['controls']; let i=index"
[formGroupName]="i">
<div *ngFor="let members of familyForm.controls.nonEarningMembers['controls']; let i=index" [formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Name"
formControlName="non_earning_member_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" (keypress)="keyPress($event)"
formControlName="non_earning_member_age" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Relation"
formControlName="relationship" required>
<mat-option value="{{relation.relationship_id}}"
*ngFor="let relation of relationData">
<mat-form-field>
<input matInput placeholder="Name" formControlName="non_earning_member_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" (keypress)="keyPress($event)" formControlName="non_earning_member_age" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Relation" formControlName="relationship" required>
<mat-option value="{{relation.relationship_id}}" *ngFor="let relation of relationData">
{{relation.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Occupation"
formControlName="occupation" required>
<mat-option value="{{occupation.occupation_non_earning_member_id}}"
*ngFor="let occupation of occupationData">{{occupation.name}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Occupation" formControlName="occupation" required>
<mat-option value="{{occupation.occupation_non_earning_member_id}}" *ngFor="let occupation of occupationData">{{occupation.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="members['controls'].occupation.value==3">
<input matInput placeholder="Retired From"
formControlName="retired">
<input matInput placeholder="Retired From" formControlName="retired">
</mat-form-field>
<mat-form-field *ngIf="members['controls'].occupation.value==9">
<input matInput placeholder="Specify Others Occupation"
formControlName="others_occupation">
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addMembers()" color="primary"
matTooltip="Add More Non Earning Members" matTooltipPosition="above" *ngIf="i==0">
<input matInput placeholder="Specify Others Occupation" formControlName="others_occupation">
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addMembers()" color="primary" matTooltip="Add More Non Earning Members"
matTooltipPosition="above" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)" matTooltip="Delete" matTooltipPosition="above"
*ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-card>
<mat-card-header>
<p>Residence </p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Residence Address"
formControlName="residence" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Number of yrs" formControlName="years" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Ownership" formControlName="ownership" required>
<mat-option value="{{ownerShip.id}}"
*ngFor="let ownerShip of ownerShipData">
{{ownerShip.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="ownership.value ==4">
<input matInput placeholder="Please specify" formControlName="ownershipOther">
</mat-form-field>
<mat-form-field *ngIf="ownership.value ==3">
<input matInput placeholder="Rent Amount"
formControlName="rent">
</mat-form-field>
</mat-card-content>
</mat-card>
</mat-card>-->
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt="" /></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt="" /></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt="" /></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt="" /></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt="" /></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt="" /></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="family_details_form_remark"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="family_details_form_remark"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button> -->
<button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitFamily()"><mat-icon>save</mat-icon></button>
<button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitFamily()"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
@ -311,7 +390,7 @@
<mat-card-content>
<p>Family Details</p>
<form class="address" [formGroup]="familyForm"> -->
<!-- <mat-form-field>
<!-- <mat-form-field>
<mat-select placeholder="Person Met" formControlName="person" required>
<mat-option *ngFor="let personMet of personMetData" [value]="personMet.person_met_id">
{{personMet.person_met_name}}
@ -321,7 +400,7 @@
<mat-form-field *ngIf="person.value ==8">
<input matInput placeholder="Enter the relationship" formControlName="personOther">
</mat-form-field> -->
<!-- <mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Number Of Family Members" formControlName="members" required>
</mat-form-field>
<mat-card>

View File

@ -34,18 +34,24 @@ export class FamilyDetailsComponent implements OnInit {
pdid : string;
form_id : number;
public currentLoanForm: FormGroup;
private notifier: NotifierService;
public familyForm: FormGroup;
// public person: AbstractControl;
// public personOther: AbstractControl;
public members: AbstractControl;
public residence: AbstractControl;
public years: AbstractControl;
public ownership: AbstractControl;
public ownershipOther: AbstractControl;
public rent: AbstractControl;
selectPerson = [{
name : 'person 1',
id : 111
}, {
name : 'person 2',
id : 222
}];
earningStatus = [{
type: 'Earning',
id: 1
}, {
type: 'Non Earning',
id: 2
}]
relationData: any = [];
occupationData: any = [];
@ -68,7 +74,7 @@ export class FamilyDetailsComponent implements OnInit {
this.getMasterDetails('OCCUPATIONMEMBERS',2);
//this.getMasterDetails('PERSONSMET',3);
this.getMasterDetails('RESIDENCEOWNERSHIP',4);
this.getMasterDetails('CUSTOMERSEGMENT',5)
this.getMasterDetails('CUSTOMERSEGMENT',5);
this.initFamilyForm();
let params: any = {};
params.pd_id = this.pdid;
@ -77,131 +83,118 @@ export class FamilyDetailsComponent implements OnInit {
const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
const value = <FormArray>this.familyForm.controls['earningMembers'];
if (data.status == 200) {
var result = Object.keys(data.records.non_earning_members).map(function (key) {
return data.records.non_earning_members[key];
});
var earning = Object.keys(data.records.earning_members).map(function (key) {
return data.records.earning_members[key];
});
// this.familyForm.controls.person.setValue(data.records.person_met);
// if (data.records.person_met_other) {
// this.familyForm.controls.personOther.setValue(data.records.person_met_other);
// }
this.familyForm.controls.members.setValue(data.records.family_members);
this.familyForm.controls.years.setValue(data.records.no_of_years);
this.familyForm.controls.ownership.setValue(data.records.ownership);
this.familyForm.controls.selected_person.setValue(data.records.selected_person);
this.familyForm.controls.residence_place.setValue(data.records.residence_place);
this.familyForm.controls.residence_city.setValue(data.records.residence_city);
this.familyForm.controls.residence_state.setValue(data.records.residence_state);
this.familyForm.controls.residence_pin.setValue(data.records.residence_pin);
this.familyForm.controls.residence_No_of_years.setValue(data.records.residence_No_of_years);
this.familyForm.controls.residence_ownership.setValue(data.records.residence_ownership);
this.familyForm.controls.ownershipOther.setValue(data.records.ownershipOther);
this.familyForm.controls.rent.setValue(data.records.rent);
this.familyForm.controls.total_number_of_family_members.setValue(data.records.total_number_of_family_members);
this.familyForm.controls.family_details_form_remark.setValue(data.records.family_details_form_remark);
if (data.records.ownership_others) {
this.familyForm.controls.ownershipOther.setValue(data.records.ownership_others);
}
this.familyForm.controls.rent.setValue(data.records.what_rent);
if (result.length == 0) {
control.push(this.createNonMembers());
} else {
result.forEach(datas => {
control.push(this.createNonMembers());
});
this.familyForm.controls.nonEarningMembers.setValue(result);
}
if (earning.length == 0) {
value.push(this.createMembers());
} else {
earning.forEach(datas => {
value.push(this.createMembers());
});
this.familyForm.controls.earningMembers.setValue(earning);
}
this.familyForm.controls.residence.setValue(data.records.residence);
this.generateFamilyMembersDetailsGetData(data.records.family_members_details);
} else {
value.push(this.createMembers());
control.push(this.createNonMembers());
// value.push(this.createMembers());
// control.push(this.createNonMembers());
}
});
}
initgenerateFamilyMembersDetailsGet(val): FormGroup {
return this.fb.group({
family_member_name : [val.family_member_name, Validators.compose([])],
family_member_relationship : [val.family_member_relationship, Validators.compose([])],
family_member_age : [val.family_member_age, Validators.compose([])],
family_member_earning_status : [val.family_member_earning_status, Validators.compose([])],
earning_segment: [val.earning_segment, Validators.compose([])],
earning_gross_income_per_month: [val.earning_gross_income_per_month, Validators.compose([])],
earning_name_of_the_employer_or_business: [val.earning_name_of_the_employer_or_business, Validators.compose([])],
earning_number_of_years_in_employment_or_business: [val.earning_number_of_years_in_employment_or_business, Validators.compose([])],
non_earning_occupation: [val.non_earning_occupation, Validators.compose([])],
non_earning_if_others: [val.non_earning_if_others, Validators.compose([])],
non_earning_if_retired_from: [val.non_earning_if_retired_from, Validators.compose([])],
})
}
generateFamilyMembersDetailsGetData(data) {
var result = Object.keys(data).map(function (key) {
return data[key];
});
if (result.length > 0) {
for (let val of result) {
const control = <FormArray>this.familyForm.controls['family_members_details'];
control.push(this.initgenerateFamilyMembersDetailsGet(val));
}
}
}
onSearchChange(e):void {
e.preventDefault();
}
public initFamilyForm(): void {
this.familyForm = this.fb.group({
// person: ['', Validators.compose([Validators.required])],
selected_person: ['', Validators.compose([Validators.required])],
// personOther: [''],
members: ['', Validators.compose([Validators.required])],
residence: ['', Validators.compose([Validators.required])],
years: ['', Validators.compose([Validators.required])],
ownership: ['', Validators.compose([Validators.required])],
// members: ['', Validators.compose([Validators.required])],
residence_place: ['', Validators.compose([])],
residence_city: ['', Validators.compose([])],
residence_state: ['', Validators.compose([])],
residence_pin: ['', Validators.compose([])],
residence_No_of_years: ['', Validators.compose([])],
residence_ownership: ['', Validators.compose([])],
ownershipOther: [''],
rent: [''],
earningMembers: this.fb.array([]),
nonEarningMembers: this.fb.array([]),
total_number_of_family_members: ['', Validators.compose([Validators.min(1), Validators.max(20)])],
family_members_details: this.fb.array([]),
// earningMembers: this.fb.array([]),
// nonEarningMembers: this.fb.array([]),
family_details_form_remark: ['']
});
// this.person = this.familyForm.controls['person'];
// this.personOther = this.familyForm.controls['personOther'];
this.members = this.familyForm.controls['members'];
this.residence = this.familyForm.controls['residence'];
this.years = this.familyForm.controls['years'];
this.ownership = this.familyForm.controls['ownership'];
this.ownershipOther = this.familyForm.controls['ownershipOther'];
this.rent = this.familyForm.controls['rent'];
}
createMembers(): FormGroup {
return this.fb.group({
earning_member_name : ['', Validators.compose([Validators.required])],
earning_member_age : ['', Validators.compose([Validators.required])],
relation: ['', Validators.compose([Validators.required])],
segment: ['', Validators.compose([Validators.required])],
income: ['', Validators.compose([Validators.required])],
employer_name: ['', Validators.compose([Validators.required])],
});
}
createNonMembers(): FormGroup {
return this.fb.group({
non_earning_member_name : ['', Validators.compose([Validators.required])],
non_earning_member_age : ['', Validators.compose([Validators.required])],
relationship: ['', Validators.compose([Validators.required])],
occupation: ['', Validators.compose([Validators.required])],
retired: [''],
others_occupation : ['']
});
}
addearningMembers() {
const control = <FormArray>this.familyForm.controls['earningMembers'];
//this.earnMemberArrCount = control.length;
getNumberOfFamilyMemberDetails(){
// alert(this.familyForm.controls.total_number_of_family_members.valid);
if(this.familyForm.controls.total_number_of_family_members.valid){
let totalMem = this.familyForm.get('total_number_of_family_members').value;
const control = <FormArray>this.familyForm.controls.family_members_details;
if(totalMem > control.length) {
let len = totalMem - control.length;
for(let i = 0; i < len; i++){
control.push(this.generateFamilyMembersDetailsGet());
}
} else if (totalMem < control.length) {
// control.controls.slice(0, totalMem);
control.controls = [];
for(let i = 0; i < totalMem; i++){
control.push(this.generateFamilyMembersDetailsGet());
}
}
} else {
if(control.length == this.familyForm.controls['members'].value)
{
}else{
control.push(this.createMembers());
//console.log('Add earn member',this.familyForm.controls['members'].value);
}
// console.log(this.earnMemberArrCount);
// console.log(this.nonEarnMemberArrCount);
}
addMembers() {
const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
this.count++;
// this.nonEarnMemberArrCount = control.length;
// console.log(this.earnMemberArrCount);
// console.log(this.nonEarnMemberArrCount);
// if(control.length == this.familyForm.controls['members'].value)
// {
// }else{
// control.push(this.createNonMembers());
// }
generateFamilyMembersDetailsGet(): FormGroup {
return this.fb.group({
family_member_name : ['', Validators.compose([])],
family_member_relationship : ['', Validators.compose([])],
family_member_age : ['', Validators.compose([])],
family_member_earning_status : ['', Validators.compose([])],
earning_segment: ['', Validators.compose([])],
earning_gross_income_per_month: ['', Validators.compose([])],
earning_name_of_the_employer_or_business: ['', Validators.compose([])],
earning_number_of_years_in_employment_or_business: ['', Validators.compose([])],
non_earning_occupation: ['', Validators.compose([])],
non_earning_if_others: ['', Validators.compose([])],
non_earning_if_retired_from: ['', Validators.compose([])],
})
}
}
deleteEarningMembers(index) {
const control = <FormArray>this.familyForm.controls['earningMembers'];
control.removeAt(index);
}
deleteMembers(index) {
const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
control.removeAt(index);
}
// get all master details
getMasterDetails(table:string,type:number){
this._pd.getAllMasterDatas(table).subscribe(
@ -231,43 +224,10 @@ export class FamilyDetailsComponent implements OnInit {
if (!this.familyForm.valid) {
return;
}
let records: any = {};
records.no_of_years = this.years.value;
if (this.ownership.value == 4) {
records.ownership_others = this.ownershipOther.value;
}
records.ownership = this.ownership.value;
records.residence = this.residence.value;
if (this.ownership.value == 3) {
records.what_rent = this.rent.value;
}
// if (this.person.value == 8) {
// records.person_met_other = this.personOther.value;
// }
//records.person_met = this.person.value;
records.family_members = this.members.value;
records.earning_members = this.familyForm.controls['earningMembers'].value;
// filter re conditions
let non_earning_members_filter = this.familyForm.controls['nonEarningMembers'].value.map(function(obj) {
console.log(obj.occupation);
if(obj.occupation==3){
return obj;
}
else{
obj.retired='';
return obj;
}
if(obj.occupation==9){
return obj;
}
else{
obj.others_occupation='';
return obj;
}
});
records.non_earning_members = non_earning_members_filter;
records.family_details_form_remark = this.familyForm.controls['family_details_form_remark'].value;
var records = this.familyForm.value;
//To Remove The "Null" With Key also
Object.keys(records).forEach((key) => (records[key] == null) && delete records[key]);
// records.other_family_details = answerFormValues;
records.pdid = this.pdid;
records.formid = '6';
// records.fk_createdby = '251';
@ -277,25 +237,25 @@ export class FamilyDetailsComponent implements OnInit {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
});
}
validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({onlySelf: true});
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
}
// validateAllFormFields(formGroup: FormGroup) {
// Object.keys(formGroup.controls).forEach(field => {
// const control = formGroup.get(field);
// if (control instanceof FormControl) {
// control.markAsTouched({onlySelf: true});
// } else if (control instanceof FormGroup) {
// this.validateAllFormFields(control);
// }
// });
// }
/** On Key Press Event For Age */
keyPress(event: any) {
const pattern = /[0-9]/;
// /** On Key Press Event For Age */
// keyPress(event: any) {
// const pattern = /[0-9]/;
let inputChar = String.fromCharCode(event.charCode);
if (event.keyCode != 8 && !pattern.test(inputChar)) {
event.preventDefault();
}
}
// let inputChar = String.fromCharCode(event.charCode);
// if (event.keyCode != 8 && !pattern.test(inputChar)) {
// event.preventDefault();
// }
// }
}