nz-form表单校验

<form nz-form #f="ngForm" [formGroup]="validateForm" labelWidth="200">

                    <label style="float:left;width:98px;margin-top:10px;">{{ 'dns.traffic-rule.id' | i18n }}

                    

                        <nz-form-control [nzErrorTip]="errorTpl">

                            <input nz-input [(ngModel)]="createEditData.dnsRuleId"

                                formControlName="dnsRuleId"

                                [disabled]="type === 'edit'" name="dnsRuleId" required style="float:right;width:75%;" />

                            <ng-template #errorTpl let-control>

                                <ng-container style="    width: 75%;float: right;" *ngIf="control.hasError('required')">

                                    <span style="width: 75%; float: right;">

                                        {{'pv-please-ruleid' | i18n}}

                                    

                                

                                <ng-container *ngIf="control.hasError('name-pattern')">

                                    <span style="width: 75%; float: right;">

                                        {{'can.only.start.with.numbers' | i18n}}._-

                                    

                                

                                <ng-container *ngIf="control.hasError('name-length')">

                                    <span style="width: 75%; float: right;">

                                        {{'maxuimum.lenght' | i18n}}

                                    

                                

                            

                        

                    

\

\

                    <label style="float:left;width:98px;margin-top:10px;">{{ 'dns.ttl.value.of.rule' | i18n }}

                    

                        <nz-form-control [nzErrorTip]="ttlerrorTpl">

                            <input nz-input type="number" formControlName="ttl" [(ngModel)]="createEditData.ttl" 

                            name="ttl" required

                                style="float:right;width:75%;" />

                            <ng-template #ttlerrorTpl let-control>

                                <ng-container style="    width: 75%;float: right;" *ngIf="control.hasError('required')">

                                    <span style="width: 75%; float: right;">

                                        {{'pv-please-ttl' | i18n}}

                                    

                                

                                <ng-container *ngIf="control.hasError('pattern')">

                                    <span style="width: 75%; float: right;">

                                        {{'ttl Pattern' | i18n}}

                                    

                                

                                

                        

                    

\

            this.validateForm = this.fb.group({

                dnsRuleId:['', [Validators.required, this.ruleIdValidator]],

                domainName: ['', [Validators.required, this.domainValidator]],

                ipAddressType: ['IP_V4', [Validators.required]],

                ipAddress: [null, [Validators.required, this.ipAddressValidator]],

                state: ['ACTIVE', [Validators.required]],

                ttl: [-1, [Validators.required, Validators.pattern(/^(-1|[1-9]\d*)$/)]],

            });

\

    ruleIdValidator = (control: FormControl): { [s: string]: boolean } => {

        const part = /^[a-zA-Z][0-9a-zA-Z-_.]*$/;

        if (!control.value) {

            return { error: true, required: true };

        }else if (!part.test(control.value) || !part.test(control.value[0])){

            return { 'name-pattern': true, error: true };

        }else if (control.value.length > 63) {

            return { 'name-length': true, error: true };

        }

        return {};

    };