1. <ul id="0c1fb"></ul>

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

      RELATEED CONSULTING
      相關(guān)咨詢
      選擇下列產(chǎn)品馬上在線溝通
      服務(wù)時(shí)間:8:30-17:00
      你可能遇到了下面的問題
      關(guān)閉右側(cè)工具欄

      新聞中心

      這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
      angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)

      angular的表單

      創(chuàng)新互聯(lián)專注于龍圩網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供龍圩營(yíng)銷型網(wǎng)站建設(shè),龍圩網(wǎng)站制作、龍圩網(wǎng)頁(yè)設(shè)計(jì)、龍圩網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù),打造龍圩網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供龍圩網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

      angular的表單分為兩種,一種是響應(yīng)式的表單,另一種是模板驅(qū)動(dòng)表單。使用'@angular/forms'庫(kù)中的FormGroup, FormControl,F(xiàn)ormArray,FormBuilder 等類構(gòu)建出的數(shù)據(jù)對(duì)象就是響應(yīng)式的表單,在響應(yīng)式的表單中,我們會(huì)在數(shù)據(jù)源里面進(jìn)行各種操作,像添加校驗(yàn)等,在html文件中使用 formGroup,formGroupName,formControlName等將數(shù)據(jù)和視圖進(jìn)行綁定(需要引入ReactiveFormsModule)。

          //ts
          profileForm = new FormGroup({
            firstName: new FormControl(''),
            lastName: new FormControl(''),
            address: new FormGroup({
             street: new FormControl(""),
             city: new FormControl(""),
             state: new FormControl(""),
             zip: new FormControl("")
            })
           })
          //html
          
      

      模板驅(qū)動(dòng)的表單是我們實(shí)例化好一個(gè)類的數(shù)據(jù)之后,在html中使用 NgForm 指令后將數(shù)據(jù)和表單進(jìn)行綁定,使用[(ngModel)]來(lái)將表單的數(shù)據(jù)和和視圖進(jìn)行雙向綁定,NgForm 指令為 form 增補(bǔ)了一些額外特性。 它會(huì)控制那些帶有 ngModel 指令和 name 屬性的元素,監(jiān)聽他們的屬性。

      //html
      
      //ts model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

      響應(yīng)式表單

      響應(yīng)式的表單中,添加校驗(yàn)邏輯是以返回一個(gè)ValidatorFn類的函數(shù)實(shí)現(xiàn)的

      function forbiddenNameValidator(value: string): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } | null => {
          const rule = new RegExp(value,'i');//設(shè)定驗(yàn)證規(guī)則,i是忽略大小寫的意思
          const result = rule.test(control.value);//control.value是輸入框的值,forbidden是正則結(jié)果
          return result ? { 'forbiddenName': { value: control.value } } : null;//如果匹配成功,則返回對(duì)象
        };
      }
      
      firstName:['',[forbiddenNameValidator('bob')]],

      模板驅(qū)動(dòng)表單

      模板驅(qū)動(dòng)的表單中,添加校驗(yàn)邏輯是以指令方式實(shí)現(xiàn)的

      //ts
      import { Directive, Input } from '@angular/core';
      import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, ValidationErrors } from '@angular/forms';
      import { FormGroup } from '@angular/forms';
      export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
       return (control: AbstractControl): { [key: string]: any } | null => {
        const forbidden = nameRe.test(control.value);
        return forbidden ? { 'forbiddenName': { value: control.value } } : null;
       };
      }
      
      @Directive({
       selector: '[appForbiddenName]',
       providers: [{ provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true }]
      })
      export class ForbiddenValidatorDirective implements Validator {
       @Input('appForbiddenName') forbiddenName: string;
      
       validate(control: AbstractControl): { [key: string]: any } | null {
        return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
         : null;
       }
      }
      //html
      
      
      

      總結(jié)

      響應(yīng)式表單需要引入ReactiveFormsModule模塊,在使用時(shí)需要引入大量的指令,使用麻煩,但是添加校驗(yàn)邏輯簡(jiǎn)單,用戶可以動(dòng)態(tài)添加新的輸入域,適合非固定的表單。

      模板驅(qū)動(dòng)的表單中,表單的數(shù)據(jù)生成很簡(jiǎn)單,在html中需要雙向綁定,并且配上name屬性,添加校驗(yàn)時(shí)要是用指令的方式,適合固定的輸入表單。

      以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


      網(wǎng)頁(yè)題目:angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)
      文章鏈接:http://www.ef60e0e.cn/article/ggcpsh.html
      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
      1. <ul id="0c1fb"></ul>

        <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
        <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

        汉川市| 溧水县| 东兰县| 义乌市| 固镇县| 华池县| 宣威市| 绵竹市| 宁晋县| 绍兴市| 蛟河市| 孝义市| 中宁县| 抚州市| 渑池县| 奈曼旗| 南安市| 墨江| 清丰县| 台湾省| 都江堰市| 黄冈市| 宿松县| 泗水县| 卢氏县| 兖州市| 文登市| 秭归县| 当雄县| 鄢陵县| 乐至县| 诏安县| 丽水市| 固始县| 香格里拉县| 阜新| 虹口区| 娄烦县| 都匀市| 南昌市| 九台市|