import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { DocumentComponent } from './document/document.component';


const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent},
  { path: 'document', component: DocumentComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }









<!-- <p>
  signup works!
</p> -->

<!-- <form>
  {{name}}
<input type="somename" name="name" [(ngModel)]="name" />

<input type="text" name="username" [(ngModel)]="username" /> <br>

<input type="password" name="password" [(ngModel)]="password"/> <br>

<input type="submit"  value="login" (click)="loginUser()" />

</form> -->


<form #signupForm="ngForm" (ngSubmit)="saveUser(signupForm.value)">
  <div class="panel panel-horizontal">
    <div class="panel-heading">
      <h3>Sign up form</h3>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label class="">username:</label>
        <input type="text" class="from-control" value="tom" id="fn"
                          name="username"  #username="ngModel" required ngModel/>
      </div>
      touched: <p>{{username.touched}}</p>
      pristine: <p>{{username.pristine}}</p>
      Valid: <p>{{username.valid}}</p>
      <div class="form-group">
        <label class="">email:</label>
        <input type="text" class="from-control" name="email"  #email="ngModel" required ngModel/>
      </div>
      Valid: <p>{{email.valid}}</p>
      touched: <p>{{email.touched}}</p>
      pristine: <p>{{email.pristine}}</p>
    </div>
  <div class="panel-footer">
    <button type="submit" id="button" [disabled]="signupForm.invalid">Save</button>
  </div>
</div>
</form>

{{signupForm.value | json}}
Valid: {{signupForm.valid}}















<!-- <p class=red>
  Login
</p>
 -->

<form [formGroup]="singInForm" >
  <div class="panel panel-horizontal">
    <div class="panel-heading">
      <h3>Sign up form</h3>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label class="">username:</label>
      <input required type="text" formControlName="username" class="from-control"/>
      </div>

      <div class="form-group">
        <label class="">password:</label>
        <input type="text" formControlName="password" class="from-control"/>
      </div>

    </div>
  <div class="panel-footer">
    <button type="submit" (click)="login()" id="btn" >Save</button>
  </div>
</div>
</form>

{{singInForm.value | json}}