Angular Test
夏侯昆琦
Material.TS:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatButtonModule} from '@angular/material/button';
import {MatTableModule} from '@angular/material/table';
@NgModule({
declarations: [],
imports: [
CommonModule,
MatToolbarModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatRadioModule,
MatSelectModule,
MatDatepickerModule,
MatCheckboxModule,
MatButtonModule,
MatTableModule
],
exports : [
MatToolbarModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatRadioModule,
MatSelectModule,
MatDatepickerModule,
MatCheckboxModule,
MatButtonModule,
MatTableModule
]
})
export class MaterialModule { }
Index.html:
<!doctype html>
Style. CSS:
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
div.container{
margin: 0px 40px;
}
.fill-remaining-space{
flex: 1 1 auto;
}
form.normal-form{
margin:10px;
}
.controles-container{
width:100%;
padding: 5%;
}
.controles-container > * {
width:100%;
}
.add-bottom-padding{
padding-bottom: 10px;
}
mat-radio-group mat-radio-button{
margin-left: 5px;
}
.button-row button{
margin: 5px;
}
eMPLOYEE.HTML:
<form [formGroup]="customerForm" class ="normal-form">
<mat-grid-list cols="2" rowHeight="300px">
<mat-grid-tile>
<div class="controles-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<input formControlName="fullName" matInput placeholder="Full Name">
<mat-error>This field is Mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="email" matInput placeholder="Email">
<mat-error>Invalid Email Address</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="mobile" matInput placeholder="Mobile">
<mat-error *ngIf="customerForm.controls['mobile'].errors?.required">This field is Mandatory</mat-error>
<mat-error *ngIf="customerForm.controls['mobile'].errors?.maxLength">Length Exceedsdfsdfsddf</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="city" matInput placeholder="City">
</mat-form-field>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="controles-container">
<div class="add-bottom-padding">
<mat-radio-group formControlName="gender">
<mat-radio-button value ="1">Male</mat-radio-button>
<mat-radio-button value ="2">Female</mat-radio-button>
<mat-radio-button value ="3">Other</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field>
<mat-select formControlName="department" placeholder="Department">
<mat-option>None</mat-option>
<ng-container *ngFor="let department of departments">
<mat-option value="{{department.id}}">{{department.id}}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
<!-- test-
<mat-form-field>
<input formControlName="hireDate" matInput [matDatepicker]="picker" placeholder="hire Date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
test-->
<div class="add-bottom-padding" >
<mat-checkbox formControlName="isPermanent">Permanent Employee</mat-checkbox>
</div>
<div class="button-row">
<button mat-raised-button color='primary' type="submit" [disabled]="customerForm.invalid" (click) ="onsubmit()">Submit</button>
<button mat-raised-button color='warn' (click)="onclick()">Clear</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
EMPLOYEE.TS:
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from "../../shared/employee.service";
import { FormGroup, FormControl,Validators } from '@angular/forms';
import { NotificationService } from "../../shared/notification.service";
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
[x: string]: any;
customerForm: FormGroup
constructor(private service: EmployeeService) { }
departments=[
{id:3,value: 'CN'},
{id:2,value: 'US'},
{id:1,value: 'IN'}
]
ngOnInit() {
this.customerForm = new FormGroup({
$key: new FormControl(null),
fullName: new FormControl('',Validators.required),
email: new FormControl('',Validators.email),
mobile: new FormControl('',[Validators.required,Validators.maxLength(11)]),
city: new FormControl(''),
gender: new FormControl('1'),
department: new FormControl(0),
hireDate: new FormControl(''),
isPermanent: new FormControl('false')
})
}
onclick(){
this.customerForm.reset();
// Also can set up default Value
this.notificationService.success('::submit successfully')
}
onsubmit(){
this.customerForm.reset();
// Also can set up default Value
this.notificationService.success('::submit successfully')
}
}
类似资料：