PrimeNG之Validation

Validation

----primeng输入组件显示验证错误时自动标记为无效值。

demo code

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

<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>