Angular Test

最新推荐文章于 2022-08-15 21:29:56 发布

置顶 Fighter_Gao

最新推荐文章于 2022-08-15 21:29:56 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/shenlinggaobo/article/details/106544662

版权

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>

CompleteAngularMaterialApp

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')
  }

}

Fighter_Gao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 '
复制链接

扫一扫