Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="profileForm">
- <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" *ngIf="!showSuccessMessage">
- <div class="row">
- <div class="form-group col-xs-12 col-sm-6">
- <label for="first_name">My Skills</label>
- <div class="autocomplete">
- <input formControlName="skill_string" [(ngModel)]="skillString" name="skill_string"
- type="text" class="form-control" id="skill_string" placeholder="Comma separated" (keyup.enter)="skillsHandleEnter(skillString)">
- <ul class="autocomplete-list" *ngIf="skillHints.length > 0">
- <li class="list-item" *ngFor="let skill of skillHints" (click)="addSkillFromAutocomplete(skill)">{{skill}}</li>
- </ul>
- </div>
- <div id="skill-cloud" class="tag-cloud">
- <span class="skill-tag tag label label-success" *ngFor="let skill of selectedSkills" (click)="removeSkill(skill)">{{skill}} x</span>
- </div>
- </div>
- </div>
- <div class="row">
- <hr>
- <div class="form-group submit-group">
- <div class="col-sm-12">
- <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
- </div>
- </div>
- </div>
- </form>
- </div>
- import { Component, OnInit } from '@angular/core';
- import { FormGroup, FormBuilder } from '@angular/forms';
- import { ActivatedRoute, Router } from '@angular/router';
- import { Subscription } from 'rxjs/Rx';
- import 'rxjs/add/operator/debounceTime';
- import * as _ from 'lodash';
- import { MemberService } from '../shared/index';
- @Component({
- moduleId: module.id,
- selector: 'signup',
- templateUrl: 'signup.component.html',
- styleUrls: ['signup.component.css']
- })
- export class SignupComponent implements OnInit {
- private profileForm:FormGroup;
- private validation_errors:Array<any>;
- private selectedSkills:Array<string>;
- private skillHints:Array<string>;
- private skillString:string;
- constructor(private route: ActivatedRoute,
- private formBuilder: FormBuilder,
- private memberService: MemberService,
- private router: Router ) {
- this.selectedSkills = [];
- this.skillHints = [];
- this.skillString = '';
- // Set up form
- this.profileForm = this.formBuilder.group({
- skill_string: ['']
- });
- }
- ngOnInit(): any {
- // Do something
- }
- updateSelectedSkills(skillString:string):void {
- if(skillString) ) {
- let cleanString = skillString.trim().replace(/[ ]{2,}/g, ' ');
- this.selectedSkills = _.compact(this.selectedSkills.concat(cleanString.split(',')));
- this.skillString = '';
- this.skillHints = [];
- }
- }
- skillsHandleEnter(skillString:string):void {
- console.log("ENTER");
- this.updateSelectedSkills(skillString);
- return false;
- }
- autocompleteSkills(term:string):void {
- this.memberService.autocompleteSkills(term).subscribe(
- res => {
- this.skillHints = [];
- for(let i = 0; i < res.data.length; i++) {
- this.skillHints.push(res.data[i].name);
- }
- }
- );
- }
- addSkillFromAutocomplete(skillString:string):void {
- this.selectedSkills.push(skillString);
- this.memberProfile.skill_string = '';
- this.skillHints = [];
- this.skillString = '';
- }
- onSubmit():void {
- this.memberService.saveProfile(this.memberProfile, this.selectedSkills).subscribe(
- res => {
- console.log(res);
- }
- );
- }
- }
- <form (keydown.enter)="$event.target.tagName == 'TEXTAREA'" [formGroup]="profileForm" (ngSubmit)="onSubmit($event)">
- <button type="button" (click)="onSubmit()" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
- <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" method="post" (keydown.enter)="$event.target.id != 'skill_string'" *ngIf="!showSuccessMessage">
- <button type="submit" class="btn btn-primary pull-right" [disabled]="!profileForm.valid">Save</button>
- <button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
- @Component(...)
- class MyComponent {
- skillsHandleEnter(event, skillString) {
- event.preventDefault();
- // ... your logic
- }
- }
- <form (keydown.enter)="$event.preventDefault()"></form>
Add Comment
Please, Sign In to add comment