PrimeNG之Validation
Validation
----primeng输入组件显示验证错误时自动标记为无效值。
demo code
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
export class ValidationDemo implements OnInit { msgs: Message[] = []; userform: ControlGroup; submitted: boolean; genders: SelectItem[]; description: string; constructor(private fb: FormBuilder) {} ngOnInit() { this.userform = this.fb.group({ 'firstname': new Control('', Validators.required), 'lastname': new Control('', Validators.required), 'password': new Control('', Validators.compose([Validators.required, Validators.minLength(6)])), 'description': new Control(''), 'gender': new Control('', Validators.required) }); this.genders = []; this.genders.push({label:'Select Gender', value:''}); this.genders.push({label:'Male', value:'Male'}); this.genders.push({label:'Female', value:'Female'}); } onSubmit(value: string) { this.submitted = true; this.msgs = []; this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'}); } get diagnostic() { return JSON.stringify(this.userform.value); } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<p-growl [value]="msgs" sticky="sticky"></p-growl> <form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)"> <p-panel header="Validate"> <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px"> <div class="ui-grid-row"> <div class="ui-grid-col-2"> First Name *: </div> <div class="ui-grid-col-6"> <input pInputText type="text" formControlName="firstname" placeholder="Required"/> </div> <div class="ui-grid-col-4"> <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['firstname'].valid&&userform.controls['firstname'].dirty"> <i class="fa fa-close"></i> Firstname is required </div> </div> </div> <div class="ui-grid-row"> <div class="ui-grid-col-2"> Last Name *: </div> <div class="ui-grid-col-6"> <input pInputText type="text" formControlName="lastname" placeholder="Required"/> </div> <div class="ui-grid-col-4"> <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['lastname'].valid&&userform.controls['lastname'].dirty"> <i class="fa fa-close"></i> Lastname is required </div> </div> </div> <div class="ui-grid-row"> <div class="ui-grid-col-2"> Password *: </div> <div class="ui-grid-col-6"> <input pInputText type="password" formControlName="password" placeholder="Required - Min(6)"/> </div> <div class="ui-grid-col-4"> <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['password'].valid&&userform.controls['password'].dirty"> <i class="fa fa-close"></i> <span *ngIf="userform.controls['password'].errors['required']">Password is required</span> <span *ngIf="userform.controls['password'].errors['minlength']">Must be longer than 6 characters</span> </div> </div> </div> <div class="ui-grid-row"> <div class="ui-grid-col-2"> Description: </div> <div class="ui-grid-col-6"> <textarea pInputTextarea type="text" formControlName="description"></textarea> </div> <div class="ui-grid-col-4"></div> </div> <div class="ui-grid-row"> <div class="ui-grid-col-2"> Gender *: </div> <div class="ui-grid-col-6"> <p-dropdown [options]="genders" formControlName="gender" [autoWidth]="false"></p-dropdown> </div> <div class="ui-grid-col-4"> <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['gender'].valid&&userform.controls['gender'].dirty"> <i class="fa fa-close"></i> Gender is required </div> </div> </div> <div class="ui-grid-row"> <div class="ui-grid-col-2"></div> <div class="ui-grid-col-6"> <button pButton type="submit" label="Submit" [disabled]="!userform.valid"></button> </div> <div class="ui-grid-col-4"></div> </div> <div style="text-align:center;margin-top:20px" *ngIf="submitted"> Form Submitted <br> {{diagnostic}} </div> </div> </p-panel> </form>
作者:地平线很远
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。