/angular/

Angular, template-driven forms

2017-11-13 07:00:59

Simple example of component. Everything what you need will be generated after executing this commands ng new hello-word to create new app and ng g c contact-form to create new component. After that, what you have to do, is adjust few files. Of course more you can find in Angular documentation, here we have only my notes. One more thing, if you don’t like to install node mess on your local computer you can use my or similar docker image https://hub.docker.com/r/szalek/angular-cli/

New app and component

By this two simple commants you will be able to create skeleton for you app. If you don't have already angular ci, you can use my docker image https://hub.docker.com/r/szalek/angular-cli/

ng new hello-world
ng g c contact-form

Bootstrap installation

You don't need but it will be good to install bootstrap, everything is described here - http://blog.michalszalkowski.com/java-script/angular-cli-add-bootstrap/

Requred dependencies. FormsModule

You have to extend app.module.ts by adding FormsModule (one new import and one new item in imports section)

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

import { ContactFormComponent } from './contact-form/contact-form.component';
import { FormsModule }   from '@angular/forms';

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

contact-form.component.ts

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

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {

  constructor() {
  }

  types = [
    {id: '1', label: 'Type 1'},
    {id: '2', label: 'Type 2'},
    {id: '3', label: 'Type 3'}
  ];

  languages = [
    {id: 'PL', label: 'Polski'},
    {id: 'EN', label: 'English'},
  ];

  devlanguages = [
    {id: 1, label: 'JAVA'},
    {id: 2, label: 'PYTHON'},
    {id: 3, label: 'HTML'},
    {id: 4, label: 'JS'},
  ];

  submit(form) {
    console.log("Form", form);
  }

  debug(str) {
    console.log("Log ", str);
  }

}

contact-form.component.html


## Contact form

<div class='"row"'>
<div class='"col-xs-6"'>
<form #form='"ngForm"' (ngsubmit)='"submit(form)"'>
<!-- ------------------------------------- -->
<div class='"form-group"'>
<label for='"name"'>* Name</label>
<input #name='"ngModel"' (change)='"debug(name)"' class='"form-control"/' id='"name"' maxlength='"255"' minlength='"3"' name='"name"' ngmodel="" required="" type='"text"'/>
<div &amp;&amp;="" *ngif='"!name.valid' alert-danger&quot;="" class='"alert' name.touched&quot;="">
<div *ngif='"name.errors.required"'>User 'name' is required</div>
<div *ngif='"name.errors.minlength"'>User 'name' should be minimum 3 characters</div>
</div>
</div>
<!-- ------------------------------------- -->
<div class='"form-group"'>
<label for='"comment"'>* Comment</label>
<textarea #comment='"ngModel"' (change)='"debug(comment)"' class='"form-control"' cols='"30"' id='"comment"' maxlength='"255"' minlength='"20"' name='"comment"' ngmodel="" required="" rows='"10"'></textarea>
<div &amp;&amp;="" *ngif='"!comment.valid' alert-danger&quot;="" class='"alert' comment.touched&quot;="">
<div *ngif='"comment.errors.required"'>Comment is required</div>
<div *ngif='"comment.errors.minlength"'>Comment should be minimum 20 characters</div>
</div>
</div>
<!-- ------------------------------------- -->
<div class='"checkbox"'>
<label>
<input #option_1='"ngModel"' (change)='"debug(option_1)"' name='"option_1"' ngmodel="" type='"checkbox"' value='""'/>Option 1
        </label>
</div>
<!-- ------------------------------------- -->
<div class='"checkbox"'>
<label>
<input #option_2='"ngModel"' (change)='"debug(option_2)"' name='"option_2"' ngmodel="" type='"checkbox"' value='""'/>Option 2
        </label>
</div>
<!-- ------------------------------------- -->
<div class='"form-group"'>
<label for='"lang"'>Language</label>
<select class='"form-control"' id='"lang"' name='"lang"' ngmodel="">
<option *ngfor='"let' [value]='"lang.id"' lang="" languages&quot;="" of="">{{lang.label}}</option>
<!--<option *ngFor=&quot;let lang of languages&quot; [ngValue]=&quot;lang&quot;>{{lang.label}}</option>-->
</select>
</div>
<!-- ------------------------------------- -->
<div class='"form-group"'>
<label for='"devLang"'>Dev Language</label>
<select class='"form-control"' id='"devLang"' multiple="" name='"devLang"' ngmodel="">
<option *ngfor='"let' [value]='"devLang.id"' devlang="" devlanguages&quot;="" of="">{{devLang.label}}</option>
</select>
</div>
<!-- ------------------------------------- -->
<div *ngfor='"let' class='"radio"' of="" type="" types&quot;="">
<label>
<input [value]='"type.id"' name='"contactType"' ngmodel="" type='"radio"'/> {{type.label}}
        </label>
</div>
<!-- ------------------------------------- -->
<button [disabled]='"!form.valid"' btn-primary&quot;="" class='"btn'>
        Submit
      </button>
</form>
</div>
<div class='"col-xs-6"'>
<pre>{{form.value | json}}</pre>
</div>
</div>



styles.css

[css] @import "~bootstrap/dist/css/bootstrap.css";

.form-control.ng-touched.ng-invalid { border: 1px solid #ff6557; } [/css]

app.component.html


<section class='"container"'>
<div class='"row"'>
<div class='"col-xs-12"'>
<app-contact-form></app-contact-form>
</div>
</div>
</section>