Scribd
Upload
21 views

Angular Responsive Form Creation

Uploaded by

Rani Marri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

Angular Responsive Form Creation

Uploaded by

Rani Marri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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