Scribd
Upload
15 views

Angular Responsive Form Creation

Uploaded by

Rani Marri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

Angular Responsive Form Creation

Uploaded by

Rani Marri
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Angular Responsive Form creation

C:\users\hp\ng new hero –no-standalone


C:\users\hp\cd hero
C:\users\hp\hero\ng serve

hero-form.component.html
<div class="container">
<div [hidden]="submitted">
<h1>Hero Form</h1>
<form (ngSubmit)="onSubmit()"
#heroForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required [(ngModel)]="model.name"
name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger"> Name is required
</div>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control"
id="alterEgo" [(ngModel)]="model.alterEgo"
name="alterEgo">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger"> alterEgo is required
</div> </div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power"
required [(ngModel)]="model.power"
name="power" #power="ngModel">
<option *ngFor="let pow of powers"
[value]="pow">{{pow}}</option>
</select>
<div [hidden]="power.valid || power.pristine"
class="alert alert-danger"> Power is required
</div>
</div>
<button type="submit" class="btn btn-success"
[disabled]="!heroForm.form.valid">Submit</button>
<button type="button" class="btn btn-default"
(click)="newHero(); heroForm.reset()">New
Hero</button> </form> </div>
<div [hidden]="!submitted">
<h2>You submitted the following:</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9">{{ model.name }}</div> </div>
<div class="row">
<div class="col-xs-3">Alter Ego</div>
<div class="col-xs-9">{{ model.alterEgo }}</div>
</div>
<div class="row">
<div class="col-xs-3">Power</div>
<div class="col-xs-9">{{ model.power }}</div>
</div> <br>
<button type="button" class="btn btn-primary"
(click)="submitted=false">Edit</button>
</div> </div>

hero-form.component.css
h1{
text-align: center;
font-display:inherit;
background-color: chartreuse;
}
h2{
text-align: center;
font-display:initial;
background-color: aqua;
}
.row{
text-align: center;
font-display:inherit;
font-size: medium;
}

hero-form.component.ts
import { Component } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html',
styleUrls: ['./hero-form.component.css']
})
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;
onSubmit() { this.submitted = true; }
newHero() {
this.model = new Hero(42, '', '');
}
}

App.component.html
<app-hero-form></app-hero-form>

App.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-
browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroFormComponent } from
'./hero-form/hero-form.component';
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule
],
declarations: [
AppComponent,
HeroFormComponent
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Styles.css
@import
url('https://unpkg.com/[email protected]/dist/css/bo
otstrap.min.css');
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica
Neue", sans-serif; }

hero.ts
export class Hero {
constructor(
public id: number,
public name: string,
public power: string,
public alterEgo?: string
){ }

You might also like