第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

angular4中響應(yīng)式表單的驗(yàn)證如何做到統(tǒng)一錯(cuò)誤處理？

angular4中響應(yīng)式表單的驗(yàn)證如何做到統(tǒng)一錯(cuò)誤處理？

開心每一天1111 2019-02-25 20:17:40
各位大家，請(qǐng)問下angular4中響應(yīng)式表單的驗(yàn)證如何做到統(tǒng)一錯(cuò)誤處理？我看了angular4的很多例子（包含官網(wǎng)），驗(yàn)證錯(cuò)誤都是單獨(dú)寫的如: <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="getFormControl('name')">            <nz-input formControlName="name" [nzId]="'name'"></nz-input>            <div nz-form-explain *ngIf="validateFormControl('name','required')">名稱必填</div>            <div nz-form-explain *ngIf="validateFormControl('name','rangeLength')">名稱最多100個(gè)字符 </div>            <div nz-form-explain *ngIf="validateFormControl('name','servererror')" class="servererror">{{getErrorValueForFormControl('name','servererror')}}</div>        </div>這樣界面感覺好多重復(fù)代碼，能不能做統(tǒng)一處理，如檢查的名稱沒有填寫，自動(dòng)生成<div nz-form-explain *ngIf="validateFormControl('name','required')">名稱必填</div>這段代碼謝謝！
查看完整描述

1 回答

?
呼如林

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊

可以的。簡(jiǎn)略代碼如下:

html:


  <input type="text"  formControlName="account">

  <div *ngIf="formErrors.account" class="alert alert-danger">{{ formErrors.account }}</div>

  

  <input type="password"  formControlName="password">

  <div *ngIf="formErrors.password" class="alert alert-danger">{{ formErrors.password }}</div>

  

ts:


editForm: FormGroup;

formErrors = {

    'account': '',

    'password': ''

};


validationMessages = {

    'account': {

        'required': '請(qǐng)輸入用戶名',

        'maxlength': '用戶名不能超過20位'

    },

    'password': {

        'required': '請(qǐng)輸入密碼',

        'minlength': '密碼至少6位',

        'maxlength': '密碼必須小于16位',

        'pattern': '密碼需要包含大小寫和數(shù)字'

    }

};


 ngOnInit() {

 

 this.editForm = new FormGroup({

            account: new FormControl('', [Validators.required, Validators.maxLength(20)]),

            password: new FormControl('', [

                Validators.minLength(6),

                Validators.maxLength(16),

                Validators.required,

                Validators.pattern('^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z])[0-9a-zA-Z]{6,16}$')

            ])

        });

        

  this.editForm.valueChanges.subscribe(() => this.onValueChanged());   // 監(jiān)聽每次輸入內(nèi)容，獲得錯(cuò)誤信息

  }

  

  onValueChanged() {

    for (const item in this.formErrors) {

        this.formErrors[item] = '';

        for (const key in this.editForm.get(item).errors) {

            this.formErrors[item] += this.validationMessages[item][key] + ' ';

        }

    }

}

  


查看完整回答
反對(duì) 回復(fù) 2019-03-02
  • 1 回答
  • 0 關(guān)注
  • 1298 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)