testar-validering-av-formular

hero.component.html

<div class="container">
  <h1>Hero Form</h1>
  <form class="needs-validation was-validated">
      <div class="form-row">
      <div class="col-md-4 mb-3">
          <label for="validationCustomUsername">Username</label>
          <div class="input-group">
            <input [formControl]="usernameinput" type="text" class="form-control {{(usernameinput.invalid && usernameinput.dirty) ? 'is-invalid' : ''}}" id="validationCustomUsername" placeholder="Username">
            <div class="invalid-feedback">
              Please choose a username.
              {{usernameinput.errors}}
            </div>
          </div>
        </div>
      </div>
    <button type="submit" class="btn btn-success" (click)="onSubmit()">Submit</button>

  </form>
</div>

hero.component.ts

import { Component } from "@angular/core";

import { Hero } from "../hero";

import { FormControl, Validators } from "@angular/forms";

@Component({
  selector: "app-hero-form",
  templateUrl: "./hero-form.component.html",
  styleUrls: ["./hero-form.component.scss"]
})
export class HeroFormComponent {
  powers = ["Really Smart", "Super Flexible", "Super Hot", "Weather Changer"];

  model = new Hero(18, "Dr IQ", this.powers[0], "Chuck Overstreet");

  submitted = false;

  usernameinput = new FormControl("", [
    Validators.required,
    Validators.maxLength(3)
  ]);

  onSubmit() {
    this.submitted = true;
  }

  // TODO: Remove this when we're done
  get diagnostic() {
    return JSON.stringify(this.model);
  }
}