Angular Form ReactiveformComponent

ReactiveformComponent

ReactiveformComponent is model driven form.

※ Personally, ReactiveformComponent code seems to be clear from reader, I think.

Sample

reactiveform.component.ts

import { Component, VERSION, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form &#91;formGroup&#93;="myForm" (ngSubmit)="show()">
      <div>
        <label for="mail">Email:</label><br/>
        <input id="mail" name="mail" type="email"
               &#91;formControl&#93;="mail"/>
        <span *ngIf="mail?.errors?.required">*required</span>
        <span *ngIf="mail?.errors?.email">Style is wrong</span>
      </div>
      <div>
        <label for="password">Password :</label><br/>
        <input id="passwd" name="passwd" type="password"
               &#91;formControl&#93;="passwd"/>
        <span *ngIf="passwd?.errors?.required && passwd?.dirt">*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;formControl&#93;="name"/>
        <span *ngIf="name?.errors?.required">*required</span>
        <span *ngIf="name?.errors?.minlength">Name should be more than 3 characters</span>
        <span *ngIf="name?.errors?.maxlength">Name should be less than 10 characters</span>
      </div>
      <div>
        <label for="memo">Memo :</label><br/>
        <textarea id="memo" name="memo" rows="5" cols="30" &#91;formControl&#93;="memo">
        </textarea>
        <span *ngIf="memo?.errors?.maxlength">Memo should be less than 10 characters</span>
      </div>
      <div>
        <input type="submit" value="Submit" &#91;disabled&#93;="myForm.invalid"/>
        <input type="reset" value="Reset" &#91;disabled&#93;="myForm.pristine"/>
      </div>
      <p>Angular {{v.full}}</p>
    </form>`
}) export class ReactiveformComponent implements OnInit {

  mail = new FormControl('ito@gmail.com', [
    Validators.required,
    Validators.email
  ]);

  passwd = new FormControl('', [
    Validators.required,
    Validators.minLength(6)
  ]);

  name = new FormControl('Noname', [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(10)
  ]);

  memo = new FormControl('', [
    Validators.maxLength(10)
  ]);

  myForm: FormGroup;

  v = VERSION;

  constructor(private builder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.builder.group({
      mail: this.mail,
      passwd: this.passwd,
      name: this.name,
      memo: this.memo
    });
  }

  show() {
    console.log('Email :' + this.mail.value);
    console.log('Password :' + this.passwd.value);
    console.log('Name : ' + this.name.value);
    console.log('Memo : ' + this.memo.value);
    console.log('All :');
    console.log(this.myForm.value);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ReactiveformComponent } from './reactiveform.component';

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

Problem

I used the latest WebStrom editor when I developed javascript related project.
I could not fix editor error using ReactiveformComponent.

Ref

ReactiveFormsModule vs. FormsModule in Angular2