at-uytran · at-uytran · Aug 7, 2017 · Aug 7, 2017 · Aug 8, 2017 · Aug 8, 2017
diff --git a/my-app/src/app/app.component.css b/my-app/src/app/app.component.css
@@ -0,0 +1,5 @@
+.show{
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-top: 50px;
+}
diff --git a/my-app/src/app/app.component.html b/my-app/src/app/app.component.html
@@ -1,20 +1,33 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+<div class="show">
+<form [formGroup]= "memberForm" (ngSubmit)="addMember(memberForm)">
+  <div formGroupName = "personal">
+  <label for="name">Name</label>
+  <input type="text" class="form-control" id="name" placeholder="Your name" formControlName = "name">
+  <small [hidden]="memberForm.controls.personal.get('name').valid || (memberForm.controls.personal.get('name').pristine && !submitted)">
+      Name is required (minimum 5 characters).
+  </small><br>
+
+  <label for="birthday">Birthday</label>
+  <input type="date" class="form-control" id="birthday" formControlName = "birthday">
+</div>
+<div formGroupName = "company">
+  <label>Team:</label><br>
+  <select  formControlName= "team" >
+  <option>None</option>
+    <option *ngFor="let team of teams">{{team}}</option>
+  </select><br>
+  <label for="skills">Skills: </label>
+
+  <input type="text" class="form-control" id="skills" formControlName = "skills">
+    <small [hidden]="memberForm.controls.company.get('skills').valid || (memberForm.controls.company.get('skills').pristine && !submitted)">
+      Team is invalid.
+  </small><br>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
-  </li>
-</ul>
+<button type="submit" [disabled] = "!memberForm.valid" class="btn btn-success">Add member</button>
+</form>
 
+<div>
+  <ul id="list">
+  </ul>
+</div>
+</div>
diff --git a/my-app/src/app/app.component.ts b/my-app/src/app/app.component.ts
@@ -1,10 +1,112 @@
-import { Component } from '@angular/core';
+import { Component, Inject, OnChanges, OnInit } from '@angular/core';
+import { MemberFormComponent } from './member_form.component';
+import { NgForm, FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit{
+  teams: any[];
+  birthday: string = '';
+  selectedTeam ='';
+  displaySkills = '';
+  currentTeam = '';
+  teamSkills = {
+    "Ruby": ["Ruby"],
+    "PHP": ["PHP"],
+    "FE": ["HTML","CSS", "JS"]
+};
+
+  memberForm: FormGroup;
+  personal: FormGroup;
+  company: FormGroup;
+  name = new FormControl('', [
+    Validators.minLength(3),
+  ]);
+  skills = new FormControl('', [Validators.required, this.checkSkills.bind(this)]);
+
+  team: any;
+
+  constructor(@Inject(FormBuilder) formBuilder: FormBuilder) {
+    this.teams = ['Ruby', 'FE', 'PHP'];
+
+     this.memberForm = formBuilder.group({
+          personal: formBuilder.group({
+            name: this.name,
+            birthday: new FormControl(''),
+          }),
+          company: formBuilder.group({
+            team: new FormControl(''),
+            skills: this.skills,
+          })
+       });
+     this.team = this.memberForm.controls.company.get('team');
+     console.log(this.team);
+     }
+
+  checkSkills(form: FormControl) {
+
+    var skills = form.value;
+    console.log(this.team);
+    if (typeof this.memberForm != 'undefined'){
+      console.log(1);
+      // console.log(this.teamSkills[this.memberForm.controls.company.get('team').value]);
+
+      return this.teamSkills[this.team.value]== skills ? null : {'invalid skills' : true};
+    }
+    else return "there are no skills";
+
+    }
+  ngOnChanges(changeRecord) {
+console.log(4);
+  }
+  ngOnInit() {
+       console.log(this.memberForm.controls.company.get('team').value);
+       this.memberForm.controls.company.get('team').valueChanges.subscribe((form) => {
+         this.memberForm.controls.company.get('skills').setValue('');
+     });
+  }
+
+  ngDoCheck(){
+// console.log(4);
+
+    // console.log(this.memberForm.controls.personal.get('name').value);
+     // this.memberForm.valueChanges.subscribe((form) => {
+     //   this.displaySkills = `${form.personal}`;
+     // });
+     // console.log(3);
+     // console.log(this.displaySkills);
+     // console.log(this.personal.controls);
+     // this.memberForm.controls['skills'].setValue(this.displaySkills);
+
+     // switch(this.displaySkills) {
+     //  case 'Ruby':
+     //      this.memberForm.controls['skills'].setValue("I have "+this.displaySkills+" skills");
+     //      break;
+     //  case 'PHP':
+     //      this.memberForm.controls['skills'].setValue("I have "+this.displaySkills+" skills");
+     //      break;
+     //  case 'FE':
+     //      this.memberForm.controls['skills'].setValue("I have "+this.displaySkills+": JS, HTML, CSS skills");
+     //      break;
+     //  default:
+     //      this.memberForm.controls['skills'].setValue("I have no skills");
+     //  }
+  }
+
+  addMember(memberForm: FormGroup) {
+  // console.log(2);
+  //   // this.checkSkills() ;
+    console.log(this.memberForm.controls.personal.get('name').value);
+
+  // console.log(this.memberForm.value);
+  var list = document.getElementById("list");
+  var member = document.createElement('li');
+  var c = document.createElement('span');
+  c.innerHTML = "Name: "+ this.memberForm.controls.personal.get('name').value + ", birthday: " +this.memberForm.controls.personal.get('birthday').value;
+  member.appendChild(c);
+  list.appendChild(member);
+  }
 }
diff --git a/my-app/src/app/app.module.ts b/my-app/src/app/app.module.ts
@@ -1,14 +1,18 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { ReactiveFormsModule, FormsModule }   from '@angular/forms';
 import { AppComponent } from './app.component';
+import { MemberFormComponent } from './member_form.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MemberFormComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    ReactiveFormsModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/my-app/src/app/member.ts b/my-app/src/app/member.ts
diff --git a/my-app/src/app/member_form.component.html b/my-app/src/app/member_form.component.html
@@ -0,0 +1,18 @@
+<form #memberForm="ngForm" (ngSubmit)="addMember(memberForm)">
+  <label for="name">Name</label>
+  <input type="text" name="name" id="name" ngModel>
+  <label for="birthday">Birthday</label>
+  <input type="text" name="birthday" id="birthday" ngModel>
+  <select type="select" name="team">
+    <option value="Ruby">Ruby</option>
+    <option value="FE">FE</option>
+    <option value="PHP">PHP</option>
+  </select>
+  <button type="submit">Add member</button>
+</form>
+
+<div>
+  <ul class="list">
+
+  </ul>
+</div>
diff --git a/my-app/src/app/member_form.component.ts b/my-app/src/app/member_form.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
+@Component({
+  selector: 'member-form',
+  templateUrl: './app.component.html'
+})
+export class MemberFormComponent {
+  name: string = '';
+  team: string = '';
+  birthday: string = '';
+
+// register(form: NgForm) {
+// console.log(form.value.username);
+// console.log(this.username);
+// // ...
+// }
+  addMember(form: NgForm) {
+  console.log(form.value.name);
+  console.log(form.value.team);
+  console.log(form.value.birthday);
+
+  }
+}
diff --git a/my-app/src/index.html b/my-app/src/index.html
@@ -7,8 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>Loading...</app-root>
 </body>
 </html>