Guest User

Untitled

a guest
Jul 23rd, 2018
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.14 KB | None | 0 0
  1. <div id="profileForm">
  2. <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" *ngIf="!showSuccessMessage">
  3.  
  4. <div class="row">
  5.  
  6. <div class="form-group col-xs-12 col-sm-6">
  7. <label for="first_name">My Skills</label>
  8. <div class="autocomplete">
  9. <input formControlName="skill_string" [(ngModel)]="skillString" name="skill_string"
  10. type="text" class="form-control" id="skill_string" placeholder="Comma separated" (keyup.enter)="skillsHandleEnter(skillString)">
  11. <ul class="autocomplete-list" *ngIf="skillHints.length > 0">
  12. <li class="list-item" *ngFor="let skill of skillHints" (click)="addSkillFromAutocomplete(skill)">{{skill}}</li>
  13. </ul>
  14. </div>
  15. <div id="skill-cloud" class="tag-cloud">
  16. <span class="skill-tag tag label label-success" *ngFor="let skill of selectedSkills" (click)="removeSkill(skill)">{{skill}} x</span>
  17. </div>
  18. </div>
  19.  
  20. </div>
  21.  
  22. <div class="row">
  23.  
  24. <hr>
  25.  
  26. <div class="form-group submit-group">
  27. <div class="col-sm-12">
  28. <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
  29. </div>
  30. </div>
  31.  
  32. </div>
  33.  
  34. </form>
  35. </div>
  36.  
  37. import { Component, OnInit } from '@angular/core';
  38. import { FormGroup, FormBuilder } from '@angular/forms';
  39. import { ActivatedRoute, Router } from '@angular/router';
  40.  
  41. import { Subscription } from 'rxjs/Rx';
  42. import 'rxjs/add/operator/debounceTime';
  43. import * as _ from 'lodash';
  44.  
  45. import { MemberService } from '../shared/index';
  46.  
  47. @Component({
  48. moduleId: module.id,
  49. selector: 'signup',
  50. templateUrl: 'signup.component.html',
  51. styleUrls: ['signup.component.css']
  52. })
  53. export class SignupComponent implements OnInit {
  54.  
  55. private profileForm:FormGroup;
  56. private validation_errors:Array<any>;
  57. private selectedSkills:Array<string>;
  58. private skillHints:Array<string>;
  59. private skillString:string;
  60.  
  61. constructor(private route: ActivatedRoute,
  62. private formBuilder: FormBuilder,
  63. private memberService: MemberService,
  64. private router: Router ) {
  65.  
  66. this.selectedSkills = [];
  67. this.skillHints = [];
  68. this.skillString = '';
  69.  
  70. // Set up form
  71. this.profileForm = this.formBuilder.group({
  72. skill_string: ['']
  73. });
  74.  
  75. }
  76.  
  77. ngOnInit(): any {
  78. // Do something
  79. }
  80.  
  81.  
  82.  
  83. updateSelectedSkills(skillString:string):void {
  84. if(skillString) ) {
  85. let cleanString = skillString.trim().replace(/[ ]{2,}/g, ' ');
  86. this.selectedSkills = _.compact(this.selectedSkills.concat(cleanString.split(',')));
  87. this.skillString = '';
  88. this.skillHints = [];
  89. }
  90. }
  91.  
  92. skillsHandleEnter(skillString:string):void {
  93. console.log("ENTER");
  94. this.updateSelectedSkills(skillString);
  95. return false;
  96. }
  97.  
  98. autocompleteSkills(term:string):void {
  99. this.memberService.autocompleteSkills(term).subscribe(
  100. res => {
  101. this.skillHints = [];
  102. for(let i = 0; i < res.data.length; i++) {
  103. this.skillHints.push(res.data[i].name);
  104. }
  105. }
  106. );
  107. }
  108.  
  109. addSkillFromAutocomplete(skillString:string):void {
  110. this.selectedSkills.push(skillString);
  111. this.memberProfile.skill_string = '';
  112. this.skillHints = [];
  113. this.skillString = '';
  114. }
  115.  
  116.  
  117. onSubmit():void {
  118. this.memberService.saveProfile(this.memberProfile, this.selectedSkills).subscribe(
  119. res => {
  120. console.log(res);
  121. }
  122. );
  123. }
  124.  
  125. }
  126.  
  127. <form (keydown.enter)="$event.target.tagName == 'TEXTAREA'" [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">
  128.  
  129. <button type="button" (click)="onSubmit()" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
  130.  
  131. <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" (keydown.enter)="$event.target.id != 'skill_string'" *ngIf="!showSuccessMessage">
  132.  
  133. <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
  134.  
  135. <button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
  136.  
  137. @Component(...)
  138. class MyComponent {
  139. skillsHandleEnter(event, skillString) {
  140. event.preventDefault();
  141. // ... your logic
  142. }
  143. }
  144.  
  145. <form (keydown.enter)="$event.preventDefault()"></form>
Add Comment
Please, Sign In to add comment