ValidationPrimeNG input components indicate validation errors automatically when their value is marked as invalid.

Validation - 图1

View on GitHub

  • validationdemo.ts
  • validationdemo.html

    validationdemo.ts

  2. import {Component,OnInit} from '@angular/core';
  3. import {Validators,FormControl,FormGroup,FormBuilder} from '@angular/forms';
  4. import {SelectItem} from '../../../components/common/api';
  5. import {MessageService} from 'primeng/api';
  7. @Component({
  8.     templateUrl: 'showcase/demo/validation/validationdemo.html',
  9.     providers: [MessageService]
  10. })
  11. export class ValidationDemo implements OnInit {
  13.     userform: FormGroup;
  15.     submitted: boolean;
  17.     genders: SelectItem[];
  19.     description: string;
  21.     constructor(private fb: FormBuilder, private messageService: MessageService) {}
  23.     ngOnInit() {
  24.         this.userform = this.fb.group({
  25.             'firstname': new FormControl('', Validators.required),
  26.             'lastname': new FormControl('', Validators.required),
  27.             'password': new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)])),
  28.             'description': new FormControl(''),
  29.             'gender': new FormControl('', Validators.required)
  30.         });
  32.         this.genders = [];
  33.         this.genders.push({label:'Select Gender', value:''});
  34.         this.genders.push({label:'Male', value:'Male'});
  35.         this.genders.push({label:'Female', value:'Female'});
  36.     }
  38.     onSubmit(value: string) {
  39.         this.submitted = true;
  40.         this.messageService.add({severity:'info', summary:'Success', detail:'Form Submitted'});
  41.     }
  43.     get diagnostic() { return JSON.stringify(this.userform.value); }
  45. }
  46.  

validationdemo.html

  2. <p-toast [style]="{marginTop: '80px'}"></p-toast>
  4. <form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
  5.     <p-panel header="Validate">
  6.         <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
  7.             <div class="ui-grid-row">
  8.                 <div class="ui-grid-col-2">
  9.                     First Name *:
  10.                 </div>
  11.                 <div class="ui-grid-col-6">
  12.                     <input pInputText type="text" formControlName="firstname" placeholder="Required"/>
  13.                 </div>
  14.                 <div class="ui-grid-col-4">
  15.                     <p-message severity="error" text="Firstname is required" *ngIf="!userform.controls['firstname'].valid&&userform.controls['firstname'].dirty"></p-message>
  16.                 </div>
  17.             </div>
  18.             <div class="ui-grid-row">
  19.                 <div class="ui-grid-col-2">
  20.                     Last Name *:
  21.                 </div>
  22.                 <div class="ui-grid-col-6">
  23.                     <input pInputText type="text" formControlName="lastname" placeholder="Required"/>
  24.                 </div>
  25.                 <div class="ui-grid-col-4">
  26.                     <p-message severity="error" text="Lastname is required" *ngIf="!userform.controls['lastname'].valid&&userform.controls['lastname'].dirty"></p-message>
  27.                 </div>
  28.             </div>
  29.             <div class="ui-grid-row">
  30.                 <div class="ui-grid-col-2">
  31.                     Password *:
  32.                 </div>
  33.                 <div class="ui-grid-col-6">
  34.                     <input pInputText type="password" formControlName="password" placeholder="Required - Min(6)"/>
  35.                 </div>
  36.                 <div class="ui-grid-col-4">
  37.                 <p-message severity="error" [text]="userform.controls['password'].errors['required'] ? 'Password is required' : userform.controls['password'].errors['minlength'] ? 'Must be longer than 6 characters' : ''" 
  38.                         *ngIf="!userform.controls['password'].valid&&userform.controls['password'].dirty"></p-message>
  39.                 </div>
  40.             </div>
  41.             <div class="ui-grid-row">
  42.                 <div class="ui-grid-col-2">
  43.                     Description:
  44.                 </div>
  45.                 <div class="ui-grid-col-6">
  46.                     <textarea pInputTextarea type="text" formControlName="description"></textarea>
  47.                 </div>
  48.                 <div class="ui-grid-col-4"></div>
  49.             </div>
  50.             <div class="ui-grid-row">
  51.                 <div class="ui-grid-col-2">
  52.                     Gender *:
  53.                 </div>
  54.                 <div class="ui-grid-col-6">
  55.                     <p-dropdown [options]="genders" formControlName="gender"></p-dropdown>
  56.                 </div>
  57.                 <div class="ui-grid-col-4">
  58.                     <p-message severity="error" text="Gender is required" *ngIf="!userform.controls['gender'].valid&&userform.controls['gender'].dirty"></p-message>
  59.                 </div>
  60.             </div>
  61.             <div class="ui-grid-row">
  62.                 <div class="ui-grid-col-2"></div>
  63.                 <div class="ui-grid-col-6">
  64.                     <button pButton type="submit" label="Submit" [disabled]="!userform.valid"></button>
  65.                 </div>
  66.                 <div class="ui-grid-col-4"></div>
  67.             </div>
  68.             <div style="text-align:center;margin-top:20px" *ngIf="submitted">
  69.                 Form Submitted
  70.                 <br>
  71.                 {{diagnostic}}
  72.             </div>
  73.         </div>
  74.     </p-panel>
  75. </form>
  76.