Angular Form FormsModule

Form module

Form is one of important component in webpage.
Angular prepares 2 types of Form module.

• FormsModule – General from
• ReactiveFormsModule – Model driven form

In this time, explain about FormsModule.

Form

There are several things we covered in this sample.

• Model
• Submit method
• Form status
• Validation

Sample

app.component.ts

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-root',
  template: `
    <form #testForm="ngForm" (ngSubmit)="show()" novalidate>
      <div>
        <label for="mail">Email :</label><br />
        <input id="mail" name="mail" type="email" &#91;(ngModel)&#93;="user.mail" #mail="ngModel" required email />
        <span *ngIf="mail?.errors?.required">
          *required
        </span>
        <span *ngIf="mail?.errors?.email">
          Invalid email address
        </span>
      </div>
      <div>
        <label for="passwd">Password :</label><br />
        <input id="passwd" name="passwd" type="password" &#91;(ngModel)&#93;="user.passwd" required minlength="6" #passwd="ngModel"/>
        <span *ngIf="passwd?.errors?.required && passwd.dirty"> <!-- dirty is needed -->
          *required
        </span>
        <span *ngIf="passwd?.errors?.minlength">
          Password should be more than 6 characters
        </span>
      </div>
      <div>
        <label for="name">Name :</label><br />
        <input id="name" name="name" type="text" &#91;(ngModel)&#93;="user.name" required minlength="3" maxlength="10" #name="ngModel"/>
        <span *ngIf="name?.errors?.required">
          *required
        </span>
        <span *ngIf="name?.errors?.minlength">
          Name is more than 3
        </span>
        <span *ngIf="name?.errors?.maxlength">
          Name is less than 10
        </span>
      </div>
      <div>
        <label for="memo">Memo :</label><br />
        <textarea id="memo" name="memo" rows="5" cols="30" &#91;(ngModel)&#93;="user.memo" maxlength="10" #memo="ngModel"></textarea>
        <span *ngIf="memo?.errors?.maxlength">
          Memo is less than 10
        </span>
      </div>
      <div>
        <input type="submit" value="Submit" &#91;disabled&#93;="testForm.invalid || testForm.submitted"/>
        <input type="reset" value="Reset" &#91;disabled&#93;="testForm.pristine"/>
      </div>
      <pre>{{testForm.value | json}}</pre>
    </form>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = new User('ito@110.com', 'DJ Ito');

  show() {
    alert(this.user.name);
  }
}

novalidate disabled HTML5 validation(to use Angular validation)

user.ts

export class User {
  mail: string;
  passwd: string;
  name: string;
  memo: string;

  constructor(mail, name) {
    this.mail = mail;
    this.name = name;
  }
}

app.component.css

input.ng-dirty.ng-invalid {
  background-color: #fee;
}

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Memo : You can import both FormsModule and ReactiveFormsModule (no conflicts)
We need FormsModule

CSS Override

Following css can be modified from your own css.