API tools faq
paste
Advertisement
nitheism

violation

nitheism
Jul 16th, 2017
491
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.67 KB | None | 0 0
raw download clone embed print report
  1. <body>
  2. <div class="container">
  3.   <div class="text-center">
  4.     <h1 class="name">CV Form</h1>
  5.   </div>
  6.  
  7.  
  8.   <form [formGroup]="form" (submit)="onSubmit()">
  9.  
  10.     <div class="form-group row">
  11.       <h3><span class="label label-success">First name: </span></h3>
  12.       <input formControlName="first" class="form-control" placeholder="First Name">
  13.       <!--Validation messages-->
  14.       <div class="alert alert-danger"
  15.           *ngIf="form.controls.first.errors && (form.controls.first.touched || form.controls.first.dirty)">
  16.         <div *ngIf="!form.controls.first.required">
  17.           First name is required!
  18.         </div>
  19.         <div *ngIf="!form.controls.first.minLength">
  20.           First name should be atleast 2 characters long!
  21.         </div>
  22.  
  23.       </div>
  24.       <!--end of validaton message-->
  25.  
  26.       <h3><span class="label label-warning">Last name: </span></h3>
  27.       <input formControlName="last" class="form-control" placeholder="Last Name">
  28.       <!--Validation messages-->
  29.       <div class="alert alert-danger"
  30.           *ngIf="form.controls.last.errors && (form.controls.last.touched || form.controls.last.dirty)">
  31.         <div *ngIf="!form.controls.last.required">
  32.           First name is required!
  33.         </div>
  34.         <div *ngIf="!form.controls.last.minLength">
  35.           First name should be atleast 2 characters long!
  36.         </div>
  37.       </div>
  38.       <!--end of validaton message-->
  39.  
  40.       <h3><span class="label label-danger">Year of birth: </span></h3>
  41.       <input formControlName="year" class="form-control" placeholder="example: 1997">
  42.       <!--Validation messages-->
  43.       <div class="alert alert-danger"
  44.           *ngIf="form.controls.year.errors && (form.controls.year.touched || form.controls.year.dirty)">
  45.         <div *ngIf="!form.controls.year.required">
  46.           Year is required!
  47.         </div>
  48.         <div *ngIf="!form.controls.year.maxLength">
  49.           The year should be written as four digit number ex: 1997
  50.         </div>
  51.         <div *ngIf="!form.controls.year.pattern">
  52.           The year should contain only numbers!
  53.         </div>
  54.       </div>
  55.       <!--end of validaton message-->
  56.  
  57.       <h3><span class="label label-info">Email: </span></h3>
  58.       <input id="email" type="email" formControlName="email" class="form-control" placeholder="example: gg@gmail.com">
  59.       <!--Validation messages-->
  60.       <div class="alert alert-danger"
  61.           *ngIf="form.controls.email.errors && (form.controls.email.touched || form.controls.email.dirty)">
  62.         <div *ngIf="!form.controls.email.email">
  63.           Not a valid email!
  64.         </div>
  65.       </div>
  66.       <!--end of validaton message-->
  67.  
  68.       <h3><span class="label label-primary">Location: </span></h3>
  69.       <input formControlName="first" class="form-control" placeholder="Where are you located ex: Sofia,Bulgaria">
  70.       <!--Validation messages-->
  71.       <div class="alert alert-danger"
  72.           *ngIf="form.controls.location.errors && (form.controls.location.touched || form.controls.location.dirty)">
  73.         <div *ngIf="!form.controls.location.required">
  74.           This field is required!
  75.         </div>
  76.  
  77.       </div>
  78.       <!--end of validaton message-->
  79.  
  80.       <div formGroupName="phonenumber">
  81.         <h3><span class="label label-success">Phone: </span></h3>
  82.         <h5 class="text-danger">Your phone will be showed only when you apply to employer</h5>
  83.         <input formControlName="countrycode" class="form-control" placeholder="ex: 359">
  84.         <div class="alert alert-danger"
  85.             *ngIf="form.controls.phonenumber.controls.countrycode.errors && (form.controls.phonenumber.controls.countrycode.touched || form.controls.phonenumber.controls.countrycode.dirty)">
  86.           <div *ngIf="!form.controls.phonenumber.controls.countrycode.required">
  87.             Country code is is required!
  88.           </div>
  89.           <div *ngIf="!form.controls.phonenumber.controls.countrycode.maxLength">
  90.             The country code must be 3 digits!
  91.           </div>
  92.           <div *ngIf="!form.controls.phonenumber.controls.countrycode.pattern">
  93.             The country code should contain only numbers!
  94.           </div>
  95.         </div>
  96.         <!--end of validaton message-->
  97.  
  98.         <input id="phone" formControlName="phone" class="form-control" placeholder="Example: 08769878">
  99.         <div class="alert alert-danger"
  100.             *ngIf="form.controls.phonenumber.controls.phone.errors && (form.controls.phonenumber.controls.phone.touched || form.controls.phonenumber.controls.phone.dirty)">
  101.           <div *ngIf="!form.controls.phonenumber.controls.phone.required">
  102.             Phone number is required!
  103.           </div>
  104.           <div *ngIf="!form.controls.phonenumber.controls.phone.maxLength">
  105.             The phone number must not exceed 8 digits!
  106.           </div>
  107.           <div *ngIf="!form.controls.phonenumber.controls.phone.pattern">
  108.             The phone number should contain only numbers!
  109.           </div>
  110.         </div>
  111.         <!--end of validaton message-->
  112.  
  113.       </div>
  114.     </div>
  115.  
  116.  
  117.     <div class="panel panel-primary">
  118.       <div class="panel-heading">Programming languages experience</div>
  119.       <div class="panel-body">
  120.         <div formArrayName="proglangs" class="form-group">
  121.           <div *ngFor="let proglng of form.controls.proglangs.controls; let i = index">
  122.             <div [formGroupName]="i">
  123.               <select formControlName="proglang" class="form-control" title="select language and experience">
  124.                 <option *ngFor="let opt of proglangss">
  125.                   {{opt}}
  126.                 </option>
  127.               </select>
  128.               <!--{{i}}-->
  129.               <div
  130.                *ngIf="form.controls.proglangs.controls[i].controls.proglang.errors && (form.controls.proglangs.controls[i].controls.proglang.touched || form.controls.proglangs.controls[i].controls.proglang.dirty)"
  131.                class="alert alert-danger">
  132.                 <div *ngIf="!form.controls.proglangs.controls[i].controls.proglang.required">
  133.                   Atleast one programming language is required!
  134.                 </div>
  135.               </div>
  136.               <input formControlName="years" class="form-control" placeholder="Years of experience ex: 6">
  137.               <!--Valiadation messages-->
  138.               <div class="alert alert-danger"
  139.                   *ngIf="form.controls.proglangs.controls[i].controls.years.errors && (form.controls.proglangs.controls[i].controls.years.touched || form.controls.proglangs.controls[i].controls.years.dirty)">
  140.                 <div *ngIf="!form.controls.proglangs.controls[i].controls.years.required">
  141.                   You should specify number of years!
  142.                 </div>
  143.                 <div *ngIf="!form.controls.proglangs.controls[i].controls.years.pattern">
  144.                   Should use only numbers!
  145.                 </div>
  146.                 <div *ngIf="!form.controls.proglangs.controls[i].controls.years.maxLength">
  147.                   Number is bigger than 99!
  148.                 </div>
  149.               </div>
  150.               <!--end of validation messages-->
  151.  
  152.               <button *ngIf="form.controls.proglangs.controls.length > 1" class="btn btn-danger"
  153.                       (click)="removeProglang(i)">Remove
  154.               </button>
  155.             </div>
  156.           </div>
  157.           <button class="btn btn-primary" (click)="addProglang()">
  158.             Add
  159.           </button>
  160.         </div>
  161.       </div>
  162.     </div>
  163.  
  164.  
  165.     <div class="panel panel-primary">
  166.       <div class="panel-heading">Programming software/tools experience</div>
  167.       <div class="panel-body">
  168.         <div formArrayName="progsofts" class="form-group ">
  169.           <div *ngFor="let progsft of form.controls.progsofts.controls;let i = index;">
  170.             <div [formGroupName]="i">
  171.               <select formControlName="progsoft" class="form-control" title="select tool and experience">
  172.                 <option *ngFor="let opt of softwaress">
  173.                   {{opt}}
  174.                 </option>
  175.               </select>
  176.               <input formControlName="softyears" class="form-control" placeholder="Years of experience ex: 6">
  177.               <!--Valiadation messages-->
  178.               <div class="alert alert-danger"
  179.                   *ngIf="form.controls.progsofts.controls[i].controls.softyears.errors && (form.controls.progsofts.controls[i].controls.softyears.touched || form.controls.progsofts.controls[i].controls.softyears.dirty)">
  180.  
  181.                 <div *ngIf="!form.controls.progsofts.controls[i].controls.softyears.pattern">
  182.                   Should use only numbers!
  183.                 </div>
  184.                 <div *ngIf="!form.controls.progsofts.controls[i].controls.softyears.maxLength">
  185.                   Number is bigger than 99!
  186.                 </div>
  187.               </div>
  188.               <!--end of validation messages-->
  189.  
  190.               <button *ngIf="form.controls.progsofts.controls.length > 1" class="btn btn-danger"
  191.                       (click)="removeProgsoft(i)">Remove
  192.               </button>
  193.             </div>
  194.           </div>
  195.           <button class="btn btn-primary" (click)="addProgsoft()">Add</button>
  196.         </div>
  197.       </div>
  198.     </div>
  199.  
  200.  
  201.     <div class="panel panel-primary">
  202.       <div class="panel-heading">Spoken Languages</div>
  203.       <div class="panel-body">
  204.         <div formArrayName="spokenlangs" class="form-group">
  205.           <div *ngFor="let langs of form.controls.spokenlangs.controls; let i = index">
  206.             <div [formGroupName]="i">
  207.               <select formControlName="spoklang" class="form-control" title="Select language and level of fluency">
  208.                 <option *ngFor="let opt of languagess" [value]=opt>
  209.                   {{opt}}
  210.                 </option>
  211.               </select>
  212.               <!--Valiadation messages-->
  213.               <div class="alert alert-danger"
  214.                   *ngIf="form.controls.spokenlangs.controls[i].controls.spoklang.errors && (form.controls.spokenlangs.controls[i].controls.spoklang.touched || form.controls.spokenlangs.controls[i].controls.spoklang.dirty)">
  215.  
  216.                 <div *ngIf="!form.controls.spokenlangs.controls[i].controls.spoklang.required">
  217.                   Should have atleast one language! (like your native?)
  218.                 </div>
  219.  
  220.               </div>
  221.               <!--end of validation messages-->
  222.  
  223.               <input formControlName="fluency" class="form-control " placeholder="Level of fluency from 1 - 9">
  224.               <!--Valiadation messages-->
  225.               <div class="alert alert-danger"
  226.                   *ngIf="form.controls.spokenlangs.controls[i].controls.fluency.errors && (form.controls.spokenlangs.controls[i].controls.fluency.touched || form.controls.spokenlangs.controls[i].controls.fluency.dirty)">
  227.  
  228.                 <div *ngIf="!form.controls.spokenlangs.controls[i].controls.fluency.pattern">
  229.                   Only numbers allowed!
  230.                 </div>
  231.                 <div *ngIf="!form.controls.spokenlangs.controls[i].controls.fluency.maxLength">
  232.                   Only numbers between 1 - 9 allowed!
  233.                 </div>
  234.                 <div *ngIf="!form.controls.spokenlangs.controls[i].controls.fluency.required">
  235.                   Fluency is required!
  236.                 </div>
  237.               </div>
  238.               <!--end of validation messages-->
  239.  
  240.               <button *ngIf="form.controls.spokenlangs.controls.length > 1" class="btn btn-danger"
  241.                       (click)="removeSpokenlang(i)">Remove
  242.               </button>
  243.             </div>
  244.           </div>
  245.           <button class="btn btn-primary" (click)="addSpokenlang()">Add</button>
  246.         </div>
  247.       </div>
  248.     </div>
  249.  
  250.  
  251.     <div class="panel panel-primary">
  252.       <div class="panel-heading">Previous jobs</div>
  253.       <div class="panel-body">
  254.         <div formArrayName="prevjobs" class="form-group">
  255.           <div *ngFor="let prevj of form.controls.prevjobs.controls; let i = index">
  256.             <div [formGroupName]="i">
  257.               <input formControlName="firmname" class="form-control"
  258.                     placeholder="Name of the company you worked for">
  259.               <input formControlName="position" class="form-control" placeholder="The position you held">
  260.               <input formControlName="yearsinf" class="form-control"
  261.                     placeholder="How long have you been working for them">
  262.               <!--Valiadation messages-->
  263.               <div class="alert alert-danger"
  264.                   *ngIf="form.controls.prevjobs.controls[i].controls.yearsinf.errors && (form.controls.prevjobs.controls[i].controls.yearsinf.touched || form.controls.prevjobs.controls[i].controls.yearsinf.dirty)">
  265.  
  266.                 <div *ngIf="!form.controls.prevjobs.controls[i].controls.yearsinf.pattern">
  267.                   Only numbers allowed!
  268.                 </div>
  269.                 <div *ngIf="!form.controls.prevjobs.controls[i].controls.yearsinf.maxLength">
  270.                   No number higher than 99 allowed!
  271.                 </div>
  272.               </div>
  273.               <!--end of validation messages-->
  274.  
  275.               <button *ngIf="form.controls.prevjobs.controls.length > 1" class="btn btn-danger" (click)="removeJob(i)">
  276.                 Remove
  277.               </button>
  278.             </div>
  279.           </div>
  280.           <button class="btn btn-primary" (click)="addJob()">Add</button>
  281.         </div>
  282.       </div>
  283.     </div>
  284.  
  285.  
  286.     <div class="panel panel-primary">
  287.       <div class="panel-heading">Other Skills</div>
  288.       <div class="panel-body">
  289.         <div formArrayName="otherskill" class="form-group">
  290.           <div *ngFor="let skill of form.controls.otherskill.controls; let i = index">
  291.             <div [formGroupName]="i">
  292.               <select formControlName="skill" class="form-control" title="select tool and experience">
  293.                 <option *ngFor="let opt of skillss" [value]=opt>
  294.                   {{opt}}
  295.                 </option>
  296.               </select>
  297.               <input formControlName="level" class="form-control" placeholder="Level from 1-10 ex: 1">
  298.               <!--Valiadation messages-->
  299.               <div class="alert alert-danger"
  300.                   *ngIf="form.controls.otherskill.controls[i].controls.level.errors && (form.controls.otherskill.controls[i].controls.level.touched || form.controls.otherskill.controls[i].controls.level.dirty)">
  301.  
  302.                 <div *ngIf="!form.controls.otherskill.controls[i].controls.level.pattern">
  303.                   Only numbers allowed!
  304.                 </div>
  305.                 <div *ngIf="!form.controls.otherskill.controls[i].controls.level.maxLength">
  306.                   Only numbers between 1 - 9 allowed!
  307.                 </div>
  308.               </div>
  309.               <!--end of validation messages-->
  310.  
  311.               <button *ngIf="form.controls.otherskill.controls.length > 1" class="btn btn-danger"
  312.                       (click)="removeOtherskill(i)">Remove
  313.               </button>
  314.             </div>
  315.           </div>
  316.           <button class="btn btn-primary" (click)="addOtherskills()">Add</button>
  317.         </div>
  318.       </div>
  319.     </div>
  320.  
  321.  
  322.     <textarea class="form-control row" rows="4" formControlName="resume"
  323.              placeholder="Write your resume here"></textarea>
  324.  
  325.     <div *ngIf="form.controls.resume.errors && (form.controls.resume.touched || form.controls.resume.dirty)">
  326.       <div *ngIf="!form.controls.resume.required">
  327.         Resume is required!
  328.       </div>
  329.       <div *ngIf="!form.controls.resume.minLength">
  330.         Resume should be atleas 300 characters!
  331.       </div>
  332.       <div *ngIf="!form.controls.resume.maxLength">
  333.         Resume should not exceed 2500 characters!
  334.       </div>
  335.     </div>
  336.  
  337.     <div class="container">
  338.       <button type="submit" class="btn btn-success btn-lg">Continue</button>
  339.     </div>
  340.  
  341.   </form>
  342. </div>
  343. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!