S

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  public form = {
    name: null,
    email: null,
    password: null,
    password_confirmation: null
  };

  public error = null;

  constructor(private http: HttpClient) { }

  onSubmit() {
    return this.http.post('http://localhost:8000/api/signup', this.form)
    .subscribe(
      data => console.log(data),
      error => this.handleError(error)
    );
  }

  handleError(error) {
    this.error = error.error.error;
  }

  ngOnInit() {
  }

}


// Form
<div class="mt-4 col-8 offset-2">
  <div class="card">
    <div class="card-header">
      Sign Up
    </div>
    <div class="card-body">
      <form #signupForm=ngForm (ngSubmit)="onSubmit()">
        <div class="alert alert-danger" [hidden]="!error">
          {{error}}
        </div>

        <div class="form-group row">
          <label for="inputName3" class="col-sm-2 col-form-label">Name</label>
          <div class="col-sm-10">
            <input type="text" name="name" class="form-control" id="inputName3" placeholder="Name"
              [(ngModel)]="form.name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
          <div class="col-sm-10">
            <input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email"
              [(ngModel)]="form.email" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
            <input type="password" name="password" class="form-control" id="inputPassword3" placeholder="Password"
              [(ngModel)]="form.password" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="inputPasswordConfirmation3" class="col-sm-2 col-form-label">Confirm password</label>
          <div class="col-sm-10">
            <input type="password" name="password_confirmation" class="form-control" id="inputPasswordConfirmation3" placeholder="Сonfirmation зassword"
              [(ngModel)]="form.password_confirmation" required>
          </div>
        </div>

        <div>
          <button class="btn btn-primary" type="submit" [disabled]="!signupForm.valid">Sign Up</button>
          <a routerLink="/login" class="btn btn-info login-BSignUp" >Sign In</a>
        </div>
      </form>
    </div>
  </div>
</div>