@csmart/ngc-smart-victim 1.18.17 → 1.18.18

package/src/lib/smart-victim-detail/smart-victim-detail.component.html

@@ -0,0 +1,876 @@
+<mat-card>
+  <mat-card-content>
+
+        <div  [formGroup]="victimForm">
+
+          <mat-tab-group dynamicHeight  mat-stretch-tabs>
+            <mat-tab label="Victim Detail" >
+              <div class='container'>
+
+                    <mat-form-field>
+                      <mat-label>Is victim a minor?<font color="red">* </font></mat-label>
+                      <br>
+                      <mat-radio-group  formControlName="minorFlag"  (change)="radioMinorChange($event)" [(ngModel)]="editVictim.minorFlag" >
+                      <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                      <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                    </mat-radio-group>
+                    <input matInput placeholder="" style="display: none">
+                    <div class="help-block" *ngIf="victimForm.get('minorFlag').errors
+                    && (victimForm.get('minorFlag').dirty || victimForm.get('minorFlag').touched)">
+                    <mat-error>If victim a minor field is <strong>required</strong></mat-error>
+                    </div>
+
+                  </mat-form-field>
+
+                  <mat-form-field>
+                    <mat-label>Does the Victim have a Victim Advocate or Social Worker with <br>whom CSOSA should maintain contact?<font color="red">* </font></mat-label>
+                    <br>
+                    <br>
+                    <mat-radio-group class = "tp-radio-group"  formControlName="victimAdvocateFlag"  (change)="radioAdvocateChange($event)" [(ngModel)]="editVictim.victimAdvocateFlag">
+                      <mat-radio-button  color="primary" *ngFor="let item of flagOption" [value]="item.flagOptionYesNoUnknownId">{{item.name}} </mat-radio-button>&nbsp;
+                    </mat-radio-group>
+                    <input matInput placeholder="" style="display: none">
+                    <div class="help-block" *ngIf="victimForm.get('victimAdvocateFlag').errors
+                    && (victimForm.get('victimAdvocateFlag').dirty || victimForm.get('victimAdvocateFlag').touched)">
+                    <mat-error>If victim has advocate field is <strong>required</strong></mat-error>
+                    </div>
+                  </mat-form-field>
+
+
+               <mat-form-field>
+                  <mat-label>Victim Currently Under Supervision:</mat-label>
+                    <mat-select  formControlName="underSupervisionFlag" name="supervision" [(ngModel)]="editVictim.underSupervisionFlag" >
+                      <mat-option *ngFor="let item of flagOption" [value]="item.flagOptionYesNoUnknownId" >
+                        {{item.name}}</mat-option>
+                    </mat-select>
+                    <div class="help-block" *ngIf="victimForm.get('underSupervisionFlag').errors
+                    && (victimForm.get('underSupervisionFlag').dirty || victimForm.get('underSupervisionFlag').touched)">
+                    <mat-error>under supervision field is <strong>required</strong></mat-error>
+                    </div>
+                </mat-form-field>
+
+
+               <mat-form-field>
+                  <mat-label>Relationship to Offender:</mat-label>
+ 
+                    <mat-select  #relationShipSel multiple formControlName="victimRelationships" [(ngModel)]="editVictim.victimOffenderRelationships"  >
+                      <div (mouseleave)="relationShipSel.close()">
+                        <mat-option color="primary" *ngFor="let item of relationshipTypes" [value]="item.relationshipTypeId">
+                          {{item.name}}
+                        </mat-option>
+                     </div>
+                    </mat-select>
+
+
+                    <div class="help-block" *ngIf="victimForm.get('victimRelationships').errors
+                    && (victimForm.get('victimRelationships').dirty || victimForm.get('victimRelationships').touched)">
+                    <mat-error>relationship is <strong>required</strong></mat-error>
+                    </div>
+                </mat-form-field>
+
+
+                <mat-form-field>
+                  <mat-label>Victim Last Name:</mat-label>
+                  <input matInput formControlName="lastName"  [(ngModel)]="editVictim.lastName" >
+                  <div class="help-block" *ngIf="victimForm.get('lastName').errors
+                  && (victimForm.get('lastName').dirty || victimForm.get('lastName').touched)">
+                  <mat-error>victim last name is <strong>required</strong></mat-error>
+                  </div>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Victim First Name: </mat-label>
+                  <input matInput  formControlName="firstName" [(ngModel)]="editVictim.firstName"  >
+                  <div class="help-block" *ngIf="victimForm.get('firstName').errors
+                  && (victimForm.get('firstName').dirty || victimForm.get('firstName').touched)">
+                  <mat-error>victim first name is <strong>required</strong></mat-error>
+                 </div>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Victim Middle Name:</mat-label>
+                    <input matInput  formControlName="middleName" [(ngModel)]="editVictim.middleName">
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Victim Prefix:</mat-label>
+                    <mat-select  formControlName="prefixId" [(ngModel)]="editVictim.prefixId">
+                      <mat-option *ngFor="let item of prefixes" [value]="item.prefixId">{{item.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Victim Suffix:</mat-label>
+                    <mat-select  formControlName="suffixId"  [(ngModel)]="editVictim.suffixId">
+                      <mat-option *ngFor="let item of suffixes" [value]="item.suffixId">{{item.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Victim Gender:</mat-label>
+                  <mat-select  formControlName="genderCode" [(ngModel)]="editVictim.genderCode">
+                    <mat-option *ngFor="let item of genders" [value]="item.genderCode">{{item.name}}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Date of Birth:</mat-label>
+                   <input matInput
+                   [matDatepicker]="victimBirthRef"
+                   formControlName="birthDate"
+                  [(ngModel)]="editVictim.birthDate"
+                  (click)="victimBirthRef.open()"
+                  (dateChange)="handleDOBChange($event)"
+                    >
+                  <mat-datepicker-toggle [for]="victimBirthRef" matSuffix></mat-datepicker-toggle>
+                  <mat-datepicker #victimBirthRef></mat-datepicker>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Victim Home Phone:</mat-label>
+                    <input
+                    id="tel"
+                    matInput
+                    phoneMask
+                    [preValue]="editVictim.homePhone"
+                    [phoneControl]="homePhoneControl"
+                    [formControl]="homePhoneControl"
+                    maxlength="14"/>
+
+                  <div class="help-block" *ngIf="victimForm.get('homePhone').errors
+                  && (victimForm.get('homePhone').dirty || victimForm.get('homePhone').touched)">
+                  <mat-error><strong>Home phone number format is not correct.</strong></mat-error>
+                  </div>
+                </mat-form-field>
+
+                <mat-form-field >
+                  <mat-label>Victim Cell Phone:</mat-label>
+                  <input
+                  id="tel1"
+                  matInput
+                  phoneMask
+                  [preValue]="editVictim.cellPhone"
+                  [phoneControl]="cellPhoneControl"
+                  [formControl]="cellPhoneControl"
+                  maxlength="14"/>
+
+                  <div class="help-block" *ngIf="victimForm.get('cellPhone').errors
+                  && (victimForm.get('cellPhone').dirty || victimForm.get('cellPhone').touched)">
+                   <mat-error><strong>Cell phone number format is not correct.</strong></mat-error>
+              </div>
+                </mat-form-field>
+
+
+                <mat-form-field >
+                  <mat-label>Victim Work Phone:</mat-label>
+                  <input
+                  id="tel2"
+                  matInput
+                  phoneMask
+                  [preValue]="editVictim.workPhone"
+                  [phoneControl]="workPhoneControl"
+                  [formControl]="workPhoneControl"
+                  maxlength="14"/>
+
+                  <div class="help-block" *ngIf="victimForm.get('workPhone').errors
+                  && (victimForm.get('workPhone').dirty || victimForm.get('workPhone').touched)">
+                  <mat-error><strong>Work phone number format is not correct.</strong></mat-error>
+                  </div>
+                </mat-form-field>
+
+                <mat-form-field >
+                  <mat-label>Victim Email:</mat-label>
+                   <input matInput  formControlName="email" [(ngModel)]="editVictim.email" >
+                   <div class="help-block" *ngIf="victimForm.get('email').errors
+                  && (victimForm.get('email').dirty || victimForm.get('email').touched)">
+                  <mat-error><strong>victim email format is not correct.</strong></mat-error>
+              </div>
+                </mat-form-field>
+
+                <div></div>
+                <app-smart-address
+                [modifiedBy]="staffId"
+                [id]="addressId"
+                [outline]="true"
+                [showPsa]="true"
+                [addressValidators]="addressValidators"
+                [readonly]="false"
+                (addressIdChange)="onAddressChange($event)"
+                #addressComponent >
+
+                </app-smart-address>
+
+
+                  <!-- Docket:
+                  <div>
+                    <div  *ngFor="let docket of docketlist; let i=index">
+                      <mat-checkbox >{{docket.docketNumber}}</mat-checkbox>
+                    </div>
+                  </div> -->
+                  <div>
+                  <mat-checkbox  color="primary" formControlName="liveWithOffenderFlag" name="liveWithOffenderFlag" [(ngModel)]="editVictim.liveWithOffenderFlag"   (change)="showAddress($event)"  >victim live with offender</mat-checkbox>
+                  <br>
+                  <mat-checkbox  color="primary" formControlName="allowCsosaContactFlag" name="allowCsosaContactFlag" [(ngModel)]="editVictim.allowCsosaContactFlag">victim wants to be contacted by CSOSA</mat-checkbox>
+                  </div>
+
+                </div>
+
+                <mat-card>
+                      <mat-form-field>
+                        <mat-label> Children in Common</mat-label>
+                        <br>
+                        <mat-radio-group formControlName="commonChildrenFlag" [(ngModel)]="editVictim.commonChildrenFlag"  (change)="radioCicChange($event)">
+                            <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                            <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                          </mat-radio-group>
+                          <input matInput placeholder="" style="display: none">
+                        </mat-form-field>
+
+                       <div  *ngIf="commonChildrenDivFlag">
+
+                          <mat-form-field >
+                            <mat-label>
+                              Children number
+                             </mat-label>
+                              <input matInput  formControlName="commonChildrenNumber" [(ngModel)]="editVictim.commonChildrenNumber" >
+                            </mat-form-field>
+
+                  </div>
+
+                      <mat-form-field>
+                        <mat-label>CPO: </mat-label>
+                        <br>
+                          <mat-radio-group formControlName="cpoExpirationFlag"  [(ngModel)]="editVictim.cpoExpirationFlag" (change)="radioCpoChange($event)">
+                              <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                              <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                            </mat-radio-group>
+                            <input matInput placeholder="" style="display: none">
+                          </mat-form-field>
+
+                      <div *ngIf="cpoExpirationDivFlag">
+                          <mat-form-field>
+                            <mat-label>Expiration Date: </mat-label>
+                               <input matInput
+                               [matDatepicker]="cpoDateRef"
+                               formControlName="cpoExpirationDate"
+                              (click)="cpoDateRef.open()"
+                              [(ngModel)]="editVictim.cpoExpirationDate"  >
+                              <mat-datepicker-toggle [for]="cpoDateRef" matSuffix></mat-datepicker-toggle>
+                              <mat-datepicker #cpoDateRef></mat-datepicker>
+                            </mat-form-field>
+
+                      </div>
+
+                    <br>
+                    <br>
+
+                          <mat-form-field>
+                            <mat-label>Victim has a Support System in Place? </mat-label>
+                             <br>
+                            <mat-radio-group formControlName="supportInPlaceFlag" [(ngModel)]="editVictim.supportInPlaceFlag"  (change)="radioSupportChange($event)">
+                                <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                                <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                              </mat-radio-group>
+                              <input matInput placeholder="" style="display: none">
+                            </mat-form-field>
+
+                        <div *ngIf="supportInPlaceDivFlag">
+                            <mat-form-field>
+                              <mat-label>Support type? </mat-label>
+                                <mat-select #supportSel formControlName="victimSupports" [(ngModel)]="editVictim.victimSupports" multiple>
+                                  <div (mouseleave)="supportSel.close()">
+                                    <mat-option color="primary" *ngFor="let item of victimSupportTypes" [value]="item.victimSupportTypeId">
+                                      {{item.name}}
+                                    </mat-option>
+                                 </div>
+                                </mat-select>
+                                <input matInput placeholder="" style="display: none">
+                              </mat-form-field>
+
+                        </div>
+
+                      <br>
+                      <br>
+
+                            <mat-form-field>
+                              <mat-label>Weapons Involved?</mat-label>
+                              <br>
+                              <mat-radio-group formControlName="weaponInvolvedFlag" (change)="radioWeaponChange($event)" [(ngModel)]="editVictim.weaponInvolvedFlag" >
+                                  <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                                  <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                                </mat-radio-group>
+                                <input matInput placeholder="" style="display: none">
+                            </mat-form-field>
+
+
+                          <div *ngIf="weaponInvolvedDivFlag">
+                              <mat-form-field>
+                                <mat-label>Weapon Type</mat-label>
+                                  <mat-select  #weaponSel formControlName="victimWeaponUses" multiple [(ngModel)]="editVictim.victimWeaponUses" (selectionChange)="checkOtherWeapon($event.value)" >
+                                    <div (mouseleave)="weaponSel.close()">
+                                      <mat-option color="primary" *ngFor="let item of weaponTypes" [value]="item.weaponTypeId">
+                                        {{item.name}}
+                                      </mat-option>
+                                    </div>
+                                  </mat-select>
+                                  <input matInput placeholder="" style="display: none">
+                                </mat-form-field>
+                          </div>
+
+                          <div *ngIf="otherWeaponFlag">
+                             <mat-form-field>
+                              <mat-label>Other Weapon:* </mat-label>
+                              <input matInput  formControlName="otherWeapon" >
+                              </mat-form-field>
+                              <div class="help-block" *ngIf="victimForm.get('otherWeapon').errors
+                              && (victimForm.get('otherWeapon').dirty || victimForm.get('otherWeapon').touched)">
+                              <mat-error><strong>Other weapon is required.</strong></mat-error>
+                              </div>
+                          </div>
+
+
+                        <br>
+                        <br>
+
+                              <mat-form-field>
+                                <mat-label>Was Offender under the influence of alcohol at the time of the offense?</mat-label>
+                                <br>
+                                <mat-radio-group formControlName="alcoholUseFlag" [(ngModel)]="editVictim.alcoholUseFlag" >
+                                    <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                                    <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                                  </mat-radio-group>
+                                  <input matInput placeholder="" style="display: none">
+                                </mat-form-field>
+
+                          <br>
+                          <br>
+
+                                <mat-form-field>
+                                  <mat-label>Was Offender under the influence of drugs at the time of the offense?</mat-label>
+                                  <br>
+                                  <mat-radio-group formControlName="drugUseFlag" (change)="radioDrugChange($event)" [(ngModel)]="editVictim.drugUseFlag"  >
+                                      <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>&nbsp;
+                                      <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
+                                    </mat-radio-group>
+                                    <input matInput placeholder="" style="display: none">
+                                  </mat-form-field>
+
+                              <div *ngIf="drugUseDivFlag">
+                                  <mat-form-field>
+                                    <mat-label>Drug:</mat-label>
+                                      <mat-select  #drugSel formControlName="victimDrugUses" multiple   (selectionChange)="checkOtherDrug($event.value)" >
+                                        <div (mouseleave)="drugSel.close()">
+                                            <mat-option color="primary" *ngFor="let item of drugs" [value]="item.drugTypeId">
+                                            {{item.name}}
+                                          </mat-option>
+
+                                        </div>
+                                      </mat-select>
+                                      <input matInput placeholder="" style="display: none">
+                                    </mat-form-field>
+
+                              </div>
+
+                              <div *ngIf="otherDrugFlag">
+                                <mat-form-field>
+                                 <mat-label>Other Drug:* </mat-label>
+                                 <input matInput  formControlName="otherDrug" >
+                                 </mat-form-field>
+                                 <div class="help-block" *ngIf="victimForm.get('otherDrug').errors
+                                 && (victimForm.get('otherDrug').dirty || victimForm.get('otherDrug').touched)">
+                                 <mat-error><strong>Other drug is required.</strong></mat-error>
+                                 </div>
+                             </div>
+                            <br>
+                            <br>
+
+                            <div>
+                                <div>
+                                <mat-label>
+                                  Access Risk: 1 thru 10 (10 greatest risk): &nbsp;<b> {{editVictim.accessRisk}}</b>
+                                </mat-label>
+                                </div>
+                                <div>
+
+                                    <mat-slider
+                                    formControlName="accessRisk"
+                                    thumbLabel="true"
+                                    [displayWith]="formatLabel"
+                                    min="1"
+                                    max="10"
+                                    [(ngModel)]="editVictim.accessRisk"
+                                    ><input matSliderThumb /></mat-slider>
+
+                                </div>
+
+                            </div>
+
+                          </mat-card>
+
+
+              <br><br><br>
+            </mat-tab>
+
+           <mat-tab  *ngIf="guardianTabFlag" label="Legal Guardian">
+            <div class='container'>
+              <mat-form-field>
+                  <mat-label>Guardian Last Name:</mat-label>
+                  <input matInput formControlName="guardianLastName" [(ngModel)]="editVictim.guardianLastName" >
+                  <div class="help-block" *ngIf="victimForm.get('guardianLastName').errors ">
+                    <mat-error>Guardian last name is <strong>required</strong></mat-error>
+                  </div>
+                </mat-form-field>
+
+               <mat-form-field>
+                <mat-label>Guardian First Name:</mat-label>
+                  <input matInput  formControlName="guardianFirstName" [(ngModel)]="editVictim.guardianFirstName" >
+                  <div class="help-block" *ngIf="victimForm.get('guardianFirstName').errors ">
+                    <mat-error>Guardian first name is <strong>required</strong></mat-error>
+                  </div>
+
+                </mat-form-field>
+
+              <mat-form-field>
+                <mat-label>Guardian Prefix:</mat-label>
+                  <mat-select  formControlName="guardianPrefixId" [(ngModel)]="editVictim.guardianPrefixId" >
+                    <mat-option *ngFor="let item of prefixes" [value]="item.prefixId">{{item.name}}</mat-option>
+                  </mat-select>
+              </mat-form-field>
+
+              <mat-form-field>
+                <mat-label>Guardian Suffix:</mat-label>
+                  <mat-select  formControlName="guardianSuffixId" [(ngModel)]="editVictim.guardianSuffixId"  >
+                    <mat-option *ngFor="let item of suffixes" [value]="item.suffixId">{{item.name}}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+
+                <!-- <mat-form-field>
+                    <mat-select placeholder="Choose" formControlName="guardianGender" [(ngModel)]="editVictim.guardianGender">
+                      <mat-option *ngFor="let item of genders" [value]="item.genderCode">{{item.name}}</mat-option>
+                    </mat-select>
+                  </mat-form-field> -->
+
+
+                <mat-form-field>
+                  <mat-label>Date of Birth:</mat-label>
+                     <input matInput
+                     [matDatepicker]="guardianDateRef"
+                     formControlName="guardianBirthDate"
+                     [(ngModel)]="editVictim.guardianBirthDate"
+                     (click)="guardianDateRef.open()"
+                       >
+                    <mat-datepicker-toggle [for]="guardianDateRef" matSuffix></mat-datepicker-toggle>
+                    <mat-datepicker #guardianDateRef></mat-datepicker>
+                </mat-form-field>
+
+                <div></div>
+                  <mat-form-field >
+                  <mat-checkbox
+                  color = "primary"
+                  formControlName="guardianNoPhoneFlag">
+                  No Phone (If there is no phone, the phone fields are no longer required)</mat-checkbox>
+                  <input matInput placeholder="" style="display: none;">
+                </mat-form-field>
+
+
+                <div></div>
+                <mat-card>
+                <mat-form-field >
+                  <mat-label>Guardian Home Phone:</mat-label>
+                    <input
+                    id="tel"
+                    matInput
+                    phoneMask
+                    [preValue]="editVictim.guardianHomePhone"
+                    [phoneControl]="guardianHomePhoneControl"
+                    [formControl]="guardianHomePhoneControl"
+                    maxlength="14"/>
+
+                    <div class="help-block" *ngIf="victimForm.get('guardianHomePhone').errors
+                    && (victimForm.get('guardianHomePhone').dirty || victimForm.get('guardianHomePhone').touched)">
+                    <mat-error><strong>Guardian home phone number format is not correct.</strong></mat-error>
+                  </div>
+
+
+                </mat-form-field>
+
+                <mat-form-field >
+                  <mat-label>Guardian Cell Phone:</mat-label>
+                   <input
+                   id="tel4"
+                   matInput
+                   phoneMask
+                   [preValue]="editVictim.guardianCellPhone"
+                   [phoneControl]="guardianCellPhoneControl"
+                   [formControl]="guardianCellPhoneControl"
+                   maxlength="14"/>
+
+                    <div class="help-block" *ngIf="victimForm.get('guardianCellPhone').errors
+                     && (victimForm.get('guardianCellPhone').dirty || victimForm.get('guardianCellPhone').touched)">
+                    <mat-error><strong>Guardian Cell phone number format is not correct.</strong></mat-error>
+                    </div>
+                </mat-form-field>
+
+                <mat-form-field >
+                  <mat-label>Guardian Work Phone:</mat-label>
+
+                    <input
+                    id="tel5"
+                    matInput
+                    phoneMask
+                    [preValue]="editVictim.guardianWorkPhone"
+                    [phoneControl]="guardianWorkPhoneControl"
+                    [formControl]="guardianWorkPhoneControl"
+                    maxlength="14"/>
+
+                    <div class="help-block" *ngIf="victimForm.get('guardianWorkPhone').errors
+                       && (victimForm.get('guardianWorkPhone').dirty || victimForm.get('guardianWorkPhone').touched)">
+                       <mat-error><strong>Guardian work phone number format is not correct.</strong></mat-error>
+                    </div>
+
+
+                </mat-form-field>
+              </mat-card>
+
+              <div></div>
+
+                <mat-form-field>
+                  <mat-label>Guardian Email:</mat-label>
+                    <input matInput formControlName="guardianEmail" [(ngModel)]="editVictim.guardianEmail"  >
+                    <div class="help-block" *ngIf="victimForm.get('guardianEmail').errors
+                    && (victimForm.get('guardianEmail').dirty || victimForm.get('guardianEmail').touched)">
+                   <mat-error><strong>Guardian email format is not correct.</strong></mat-error>
+                   </div>
+                </mat-form-field>
+
+                <div></div>
+
+                <div>
+                <app-smart-address
+
+                [showPsa]="true"
+                [modifiedBy]="staffId"
+                [id]="guardianAddressId"
+                (addressIdChange)="onGuardianAddressChange($event)"
+                [outline]="true"
+                readonly="false"
+                [rowHeight]="80"
+                (isValid)="false"
+                [addressValidators]="addressValidators"
+                #guardianAddressComponent
+                >
+                </app-smart-address>
+                </div>
+              </div>
+
+              <br><br><br>
+            </mat-tab>
+
+            <!--advocate-->
+
+              <mat-tab  *ngIf="advocateTabFlag" label="Advocate" >
+                <div class='container'>
+
+                <mat-form-field>
+                  <mat-label>Advocate Last Name:</mat-label>
+                    <input matInput  formControlName="advocateLastName" [(ngModel)]="editVictim.advocateLastName"  >
+                    <div class="help-block" *ngIf="victimForm.get('advocateLastName').errors ">
+                      <mat-error>Advocate last name is <strong>required</strong></mat-error>
+                    </div>
+                 </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Advocate First Name:</mat-label>
+                    <input matInput  formControlName="advocateFirstName" [(ngModel)]="editVictim.advocateFirstName"  >
+                    <div class="help-block" *ngIf="victimForm.get('advocateFirstName').errors ">
+                      <mat-error>Advocate first name is <strong>required</strong></mat-error>
+                    </div>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Advocate Prefix:</mat-label>
+                    <mat-select  formControlName="advocatePrefixId"  [(ngModel)]="editVictim.advocatePrefixId" >
+                      <mat-option *ngFor="let item of prefixes" [value]="item.prefixId">{{item.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Advocate Suffix:</mat-label>
+                    <mat-select  formControlName="advocateSuffixId" [(ngModel)]="editVictim.advocateSuffixId"  >
+                      <mat-option *ngFor="let item of suffixes" [value]="item.suffixId">{{item.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+
+
+                <mat-form-field>
+                  <mat-checkbox
+                  color = "primary"
+                  formControlName="advocateNoPhoneFlag"
+
+                  [(ngModel)]="editVictim.advocateNoPhoneFlag" >
+                  No Phone (If there is no phone, the phone fields are no longer required)</mat-checkbox>
+                  <input matInput placeholder="" style="display: none;">
+                </mat-form-field>
+
+                <div></div>
+                <mat-card>
+                <mat-form-field >
+                  <mat-label>Advocate Home Phone:</mat-label>
+                    <input
+                    id="tel"
+                    matInput
+                    phoneMask
+                    [preValue]="editVictim.advocateHomePhone"
+                    [phoneControl]="advocateHomePhoneControl"
+                    [formControl]="advocateHomePhoneControl"
+                    maxlength="14"/>
+
+
+                    <div class="help-block" *ngIf="victimForm.get('advocateHomePhone').errors
+                    && (victimForm.get('advocateHomePhone').dirty || victimForm.get('advocateHomePhone').touched)">
+                    <mat-error><strong>Advocate home number format is not correct.</strong></mat-error>
+                  </div>
+
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Advocate Cell Phone:</mat-label>
+                    <input
+                    id="tel7"
+                    matInput
+                    phoneMask
+                    [preValue]="editVictim.advocateCellPhone"
+                    [phoneControl]="advocateCellPhoneControl"
+                    [formControl]="advocateCellPhoneControl"
+                    maxlength="14"/>
+
+                    <div class="help-block" *ngIf="victimForm.get('advocateCellPhone').errors
+                    && (victimForm.get('advocateCellPhone').dirty || victimForm.get('advocateCellPhone').touched)">
+                    <mat-error><strong>Advocate cell number format is not correct.</strong></mat-error>
+                  </div>
+
+
+                </mat-form-field>
+
+                <mat-form-field>
+                  <mat-label>Advocate Work Phone:</mat-label>
+                    <input
+                    id="tel8"
+                    matInput
+                    phoneMask
+                    [preValue]="editVictim.advocateWorkPhone"
+                    [phoneControl]="advocateWorkPhoneControl"
+                    [formControl]="advocateWorkPhoneControl"
+                    maxlength="14"/>
+
+
+                    <div class="help-block" *ngIf="victimForm.get('advocateWorkPhone').errors
+                    && (victimForm.get('advocateWorkPhone').dirty || victimForm.get('advocateWorkPhone').touched)">
+                    <mat-error><strong>Advocate work number format is not correct.</strong></mat-error>
+                  </div>
+
+                </mat-form-field>
+                </mat-card>
+
+                <div></div>
+
+                <mat-form-field>
+                  <mat-label>Advocate Email:</mat-label>
+                    <input matInput formControlName="advocateEmail"  [(ngModel)]="editVictim.advocateEmail" >
+                    <div class="help-block" *ngIf="victimForm.get('advocateEmail').errors
+                    && (victimForm.get('advocateEmail').dirty || victimForm.get('advocateEmail').touched)">
+                    <mat-error><strong>Advocate email format is not correct.</strong></mat-error>
+                  </div>
+                </mat-form-field>
+
+                <div></div>
+
+
+              <div >
+              <app-smart-address
+              [showPsa]="true"
+              [modifiedBy]="staffId"
+              [id]="advocateAddressId"
+              (addressIdChange)="onAdvocateAddressChange($event)"
+              [outline]="true"
+              readonly="false"
+              [rowHeight]="80"
+              (isValid)="false"
+              [addressValidators]="addressValidators"
+              #advocateAddressComponent >
+              </app-smart-address>
+              </div>
+              </div>
+              <br><br><br>
+            </mat-tab>
+
+
+             <mat-tab  label="Emergency Contact">
+                <div class='container'>
+
+                        <mat-form-field>
+                          <mat-label>Emergency Contact Name:</mat-label>
+                            <input matInput  formControlName="emergencyContact" [(ngModel)]="editVictim.emergencyContact"  >
+                          </mat-form-field>
+
+                          <mat-form-field>
+                            <mat-label>Emergency Phone Number:</mat-label>
+
+                               <input
+                               id="tel"
+                               matInput
+                               phoneMask
+                               [preValue]="editVictim.emergencyContactPhone"
+                               [phoneControl]="emergencyContactPhoneControl"
+                               [formControl]="emergencyContactPhoneControl"
+                               maxlength="14"/>
+
+                              <div class="help-block" *ngIf="victimForm.get('emergencyContactPhone').errors
+                              && (victimForm.get('emergencyContactPhone').dirty || victimForm.get('emergencyContactPhone').touched)">
+                              <mat-error><strong>Emergency contact number format is not correct.</strong></mat-error>
+                            </div>
+                            </mat-form-field>
+
+                </div>
+                <br><br><br>
+            </mat-tab>
+
+          </mat-tab-group>
+          <div class='outer'>
+            <div>
+               All buttons apply to all tabs. If save button is grey, please check each tab to make sure the required field is filled.<br><br>
+
+               <div class="help-block" *ngIf="victimForm.get('minorFlag').errors
+                    && (victimForm.get('minorFlag').dirty || victimForm.get('minorFlag').touched)">
+                    <mat-error>If victim a minor field is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('victimAdvocateFlag').errors
+              && (victimForm.get('victimAdvocateFlag').dirty || victimForm.get('victimAdvocateFlag').touched)">
+              <mat-error>If victim has advocate field is <strong>required</strong></mat-error>
+              </div>
+
+               <div class="help-block" *ngIf="victimForm.get('underSupervisionFlag').errors
+              && (victimForm.get('underSupervisionFlag').dirty || victimForm.get('underSupervisionFlag').touched)">
+              <mat-error>Under supervision field is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('victimRelationships').errors
+              && (victimForm.get('victimRelationships').dirty || victimForm.get('victimRelationships').touched)">
+              <mat-error>Relationship is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('lastName').errors
+              && (victimForm.get('lastName').dirty || victimForm.get('lastName').touched)">
+              <mat-error>Victim last name is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('firstName').errors
+              && (victimForm.get('firstName').dirty || victimForm.get('firstName').touched)">
+              <mat-error>victim first name is <strong>required</strong></mat-error>
+             </div>
+
+              <div class="help-block" *ngIf="victimForm.get('guardianFirstName').errors
+              && (victimForm.get('guardianFirstName').dirty || victimForm.get('guardianFirstName').touched)">
+                <mat-error>Guardian first name is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('guardianLastName').errors
+             && (victimForm.get('guardianLastName').dirty || victimForm.get('guardianLastName').touched)" >
+              <mat-error>Guardian last name is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('advocateLastName').errors
+                && (victimForm.get('advocateLastName').dirty || victimForm.get('advocateLastName').touched)" >
+                  <mat-error>Advocate last name is <strong>required</strong></mat-error>
+                  </div>
+
+                <div class="help-block" *ngIf="victimForm.get('advocateFirstName').errors
+                && (victimForm.get('advocateFirstName').dirty || victimForm.get('advocateFirstName').touched)">
+                  <mat-error>Advocate first name is <strong>required</strong></mat-error>
+                </div>
+
+
+                <div class="help-block" *ngIf="victimForm.get('otherWeapon').errors
+                    && (victimForm.get('otherWeapon').dirty || victimForm.get('otherWeapon').touched)">
+                    <mat-error>Other weapon field is <strong>required</strong></mat-error>
+              </div>
+
+              <div class="help-block" *ngIf="victimForm.get('otherDrug').errors
+              && (victimForm.get('otherDrug').dirty || victimForm.get('otherDrug').touched)">
+              <mat-error>Other drug field is <strong>required</strong></mat-error>
+             </div>
+
+
+            </div>
+
+                  <div class="inner">
+                     <button  mat-stroked-button color="primary" (click)="saveVictim()" [disabled]="!victimForm.valid"  >Save </button>
+                  </div>
+                  &nbsp;&nbsp;
+                  <div *ngIf="showDelete" class="inner">
+                  <button  mat-stroked-button color="primary" (click)="deleteVictim()">Delete </button>
+                 </div>
+                  &nbsp;&nbsp;
+                  <div class="inner">
+                  <button  mat-stroked-button color="primary" (click)="cancel()">Clear </button>
+                </div>
+                  &nbsp;&nbsp;
+                  <button mat-stroked-button color="primary"  (click)="back()">Back</button>
+
+            </div>
+
+        </div>
+        <br>
+        <br>
+
+        <div align="right">
+          <button mat-stroked-button color="primary"  (click)="addContact()"  >Add victim contact</button>
+        </div>
+
+        <div>
+
+          <mat-table #table [dataSource]="contactDataSource" class="example-table">
+            <ng-container matColumnDef="contactDate">
+                <mat-header-cell *matHeaderCellDef class="example-header-cell">Contact Date</mat-header-cell>
+                <mat-cell *matCellDef="let row" class="example-cell"> {{row.contactDate | date}} </mat-cell>
+            </ng-container>
+
+
+            <ng-container matColumnDef="victimContactMethod">
+                    <mat-header-cell *matHeaderCellDef class="example-header-cell">Contact Method</mat-header-cell>
+                    <mat-cell *matCellDef="let row" class="example-cell"> {{row.victimContactMethod}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="nextContactDate">
+              <mat-header-cell *matHeaderCellDef class="example-header-cell">Next Contact Date</mat-header-cell>
+              <mat-cell *matCellDef="let row" class="example-cell"> {{row.nextContactDate | date}} </mat-cell>
+            </ng-container>
+
+
+            <ng-container matColumnDef="staff">
+                    <mat-header-cell *matHeaderCellDef class="example-header-cell">Contact By</mat-header-cell>
+                    <mat-cell *matCellDef="let row" class="example-cell"> {{row.staff}} </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="comment">
+                            <mat-header-cell *matHeaderCellDef class="example-header-cell">Comment</mat-header-cell>
+                            <mat-cell *matCellDef="let row" class="example-cell"> {{row.comment}} </mat-cell>
+                    </ng-container>
+
+            <ng-container matColumnDef="contactId">
+                    <mat-header-cell *matHeaderCellDef class="example-header-cell"></mat-header-cell>
+                <mat-cell *matCellDef="let row" class="example-cell">
+
+                </mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="['contactDate', 'victimContactMethod','nextContactDate', 'staff', 'comment', 'contactId']" class="example-header-row"></mat-header-row>
+            <mat-row *matRowDef="let row; columns:['contactDate', 'victimContactMethod','nextContactDate', 'staff', 'comment', 'contactId'];" class="example-row"></mat-row>
+            </mat-table>
+
+
+        </div>
+
+  </mat-card-content>
+</mat-card>