//初始化一個(gè)欄位的值為測(cè)試名字，并且不可用
const Name:FormControl = new FormControl({value:'測(cè)試名字', disabled: true });

//定義表單對(duì)象的屬性為aliases的FormArray 
this.validateForm = this.fb.group({aliases: this.fb.array([]),});

//獲取FormArray 
get aliases() {return this.validateForm.get('aliases') as FormArray;}

//給FormArray 添加item
this.aliases.push(
  this.fb.group({Id: 0,Name: [null],})
);

validateForm =  new FormGroup({Name: new FormControl({value:'測(cè)試名字', disabled: true }),});
validateForm = this.fb.group({});

validateForm!: FormGroup;
//手動(dòng)創(chuàng)建
validateForm = new FormGroup({
    Name: new FormControl('測(cè)試名字'),
  });
  
//FormBuilder表單構(gòu)建器
validateForm = this.fb.group({
  Name:[ { value:'測(cè)試名字',disabled:true}],
});

 //formControlName的值必須和ts代碼中FormControl 的實(shí)例一致
 
 
 //判斷對(duì)應(yīng)的FormControl 是否沒(méi)通過(guò)校驗(yàn) 而有錯(cuò)誤信息
 
    Name is required.
 

//初始化一個(gè)欄位并且加入必填校驗(yàn)驗(yàn)證器
const name:FormControl = new FormControl({'測(cè)試名字', disabled: true },Validators.required,);

//獲取這個(gè)FormControl
get name() { return this.heroForm.get('name'); }

 //formControlName的值必須和ts代碼中FormControl 的實(shí)例一致
 
 
 //判斷對(duì)應(yīng)的FormControl 是否沒(méi)通過(guò)校驗(yàn) 而有錯(cuò)誤信息
 
    名字也太長(zhǎng)了吧....
 

//初始化一個(gè)欄位并且加入必填校驗(yàn)驗(yàn)證器
const name:FormControl = new FormControl({'測(cè)試名字', disabled: true },this.CustomValidators());

CustomValidators() {
 return (control: AbstractControl): ValidationErrors | null => {
    if(control.value.length!=10)
      {
        return {Invalid:true}
      }
      return null;
    };
}

3.表單及元素的基本方法和屬性

• 方法

• 屬性

二.實(shí)例分析及應(yīng)用

1. 簡(jiǎn)單的表單實(shí)現(xiàn)

######需求1

我們主要用到的框架版本是Angular 12 + NG-ZORRO, 所以在下面很多實(shí)現(xiàn)和示例代碼將與他們有關(guān)，雖然可能代碼不一樣，但也只是在UI層面的區(qū)別稍微大一點(diǎn)點(diǎn)，但對(duì)于TS代碼，只是換湯不換藥，稍微注意一下就好了，其實(shí)下面實(shí)例中的需求，基本就是我在工作時(shí)需要做的的一些基本內(nèi)容和遇到的問(wèn)題，經(jīng)過(guò)查閱資料后解決的思路和過(guò)程，甚至截圖都一模一樣。

實(shí)現(xiàn)最基本的表單新增功能并且校驗(yàn)員工ID為必填以及長(zhǎng)度不能超過(guò)50，要實(shí)現(xiàn)的效果圖如下

分析

1.首先需求未提出有特殊注意點(diǎn)，基本都是簡(jiǎn)單的輸入框賦值然后保存，只要基本的概念搞清楚實(shí)現(xiàn)這種最簡(jiǎn)單

2.我們用一個(gè)FormGroup和6個(gè)FormControl 完成和界面綁定即可

3.綁定驗(yàn)證器用于校驗(yàn)長(zhǎng)度和必填

實(shí)現(xiàn)步驟

1.定義html 表單結(jié)構(gòu)

  Employee ID
  
  
   
   
  
    
  

  
    
      員工編號(hào)為必填項(xiàng)目
    
  

2.在TypeScript代碼中聲明表單對(duì)象，在構(gòu)造函數(shù)中注入FormBuilder，并且在ngOnInit中進(jìn)行表單初始化

//定義表單對(duì)象
validateForm:FormGroup;

//構(gòu)造函數(shù)注入FormBuilder
constructor(private fb: FormBuilder）{}

//在聲明周期鉤子函數(shù)中初始化表單
ngOnInit() {
  //初始化并且綁定必填驗(yàn)證器和長(zhǎng)度驗(yàn)證器

    this.validateForm = this.fb.group({
      EmployeeID: ['', [Validators.required, Validators.maxLength(50)]],  
    })
}

2.在表格中應(yīng)用表單

需求2

需要實(shí)現(xiàn)表格的表單新增和提交以及個(gè)性化定制需求，要實(shí)現(xiàn)的效果圖和需求描述如下

1.點(diǎn)擊Add 添加一行表格 ,編輯完畢，點(diǎn)擊Save保存數(shù)據(jù)，點(diǎn)擊Revoke取消編輯

2.默認(rèn)開始時(shí)間和結(jié)束時(shí)間禁止使用

3.當(dāng)選擇Contract Type為 “短期合同” Contract start date 和Contract end date可用，當(dāng)選擇Contract Type為 “長(zhǎng)期合同”不可用

4.如果Contract start date 和Contract end date可用，需要驗(yàn)證開始結(jié)束時(shí)間合法性，例如開始事件不能超過(guò)結(jié)束時(shí)間

分析

1.在表格中使用表單，雖然表單在表格中，但是他的每一列同樣都是一個(gè)個(gè)FormControl

2.一共4列需要輸入值，就說(shuō)明有4個(gè)FormControl 然后最后一列就是2個(gè)按鈕

3.我們根據(jù)上面的基礎(chǔ)知識(shí)知道，F(xiàn)ormControl 不能單獨(dú)使用，所以需要被FormGroup包裹，此時(shí)說(shuō)明一行對(duì)應(yīng)一個(gè)FormGroup

4.由一行對(duì)應(yīng)一個(gè)FormGroup知道，我們的表格時(shí)多行的，也就是有多個(gè)FormGroup，我們可以使用FormArray來(lái)存儲(chǔ)，因?yàn)樗硪唤M表單組

5.根據(jù)需求第2點(diǎn)默認(rèn)開始時(shí)間和結(jié)束時(shí)間禁止使用，我們知道在一開始初始化時(shí)，設(shè)置開始結(jié)束時(shí)間對(duì)應(yīng)的FormControl 為disabled就行了

6.第3點(diǎn)需求需要涉及聯(lián)動(dòng)，也就是當(dāng)Contract Type對(duì)應(yīng)的FormControl 的值為“短期合同”時(shí)，需要將 “開始結(jié)束時(shí)間”對(duì)應(yīng)的FormControl設(shè)置為可用，這個(gè)需要自定義驗(yàn)證器來(lái)完成

實(shí)現(xiàn)步驟

1.首先定義Html表單結(jié)構(gòu)

  
    
      Contract type
      Contract start date
      Contract end date
      Agreement item
      Operation
    
  

  
    
    
      
      
        
          
            
              
              
                
                
              
            
          
          
            
              
              
              
              
              	
                
                  開始時(shí)間不能晚于結(jié)束時(shí)間
                
              
            
          
          
            
              
              
              
                
                  開始時(shí)間不能晚于結(jié)束時(shí)間
                
              
            
          
          
            
              
                
                
              
            
          
        
        
          
            Save
          
          
            Revoke
          
        
      
    
  

2.在TypeScript代碼中聲明表單對(duì)象validateForm，然后初始化一個(gè)FormArray類型的屬性aliases的實(shí)例作為表格formArrayName的值

3.點(diǎn)擊Add按鈕時(shí)向表單對(duì)象validateForm的屬性aliases添加一條數(shù)據(jù)

4.定義Contract Type 聯(lián)動(dòng)的自定義校驗(yàn)器 contractTypeValidation()方法

5.定義時(shí)間校驗(yàn)器 timeValidation()方法,如果時(shí)間不合法，將FormControl的錯(cuò)誤狀態(tài)設(shè)置屬性beginGtendDate，然后在模板中根據(jù)這個(gè)屬性來(lái)選擇是否渲染日式信息

//定義表單對(duì)象
validateForm:FormGroup;
//構(gòu)造函數(shù)注入FormBuilder
constructor(private fb: FormBuilder）{}

//在聲明周期鉤子函數(shù)中初始化一個(gè)表單對(duì)象validateForm
ngOnInit() {
this.validateForm = this.fb.group({
      aliases: this.fb.array([]),
 	});
}
//聲明aliases屬性用作界面formArrayName綁定
get aliases(){
	return this.validateForm.get('aliases') as FormArray;
}

addNewRow() {
  const group = this.fb.group({
    //添加給Type初始化驗(yàn)證器
    Type: [null, [CommonValidators.required, this.contractTypeValidation()]],
    //初始化禁用StartDate和EndDate的FormControl 
    StartDate: [{ value: null, disabled: true }, []],
    EndDate: [{ value: null, disabled: true },[]],
    ContractType: [null, [CommonValidators.required, CommonValidators.maxLength(20)]],
  })
  this.aliases.push(group);
}

  //自定義Contract Type驗(yàn)證器
contractTypeValidation() {
    return (control: AbstractControl): ValidationErrors | null => {
      let contents: any[] = this.validateForm.value.aliases;
      if (control.touched && !control.pristine) {
        //獲取表單組
        const formArray: any = this.validateForm.controls.aliases;
        //找到正在編輯的行的索引
        const index = contents.findIndex((x) => !x.isShowEdit);

        //獲取開始結(jié)束時(shí)間FormControl 實(shí)例
        const StartDate: AbstractControl =
          formArray.controls[index].get('StartDate'),
          EndDate: AbstractControl = formArray.controls[index].get('EndDate');

        if (control.value === "短期合同") {
          //給開始結(jié)束時(shí)間設(shè)置驗(yàn)證器用于驗(yàn)證時(shí)間合法性
          StartDate.setValidators([CommonValidators.required, this.timeValidation()]);
          EndDate.setValidators([this.timeValidation()]);

          //啟動(dòng)開始結(jié)束時(shí)間控件
          EndDate.enable();
          StartDate.enable();
        } else {
          //Contract Type不是短期合同就清除驗(yàn)證器
          StartDate.clearValidators();
          EndDate.clearValidators();
          //禁用開始結(jié)束時(shí)間
          EndDate.disable();
          StartDate.disable();
        }

      }
      return null;
    }
  }



  //自定義時(shí)間驗(yàn)證器
 timeValidation()
  {
    return (control: AbstractControl): ValidationErrors | null => {
      if (!control.pristine) {
        let contents: any[] = this.validateForm.value.aliases;
        const formArray: any = this.validateForm.controls.aliases;
        const index = contents.findIndex((x) => !x.isShowEdit);
        //獲取開始結(jié)束時(shí)間FormControl實(shí)例
        const EndDate: string = formArray.controls[index].get('EndDate').value;
        const StartDate: string =formArray.controls[index].get('StartDate').value;

        if (EndDate === null || StartDate === null) return null;

        //如果時(shí)間不合法，那就設(shè)置當(dāng)前控件的錯(cuò)誤狀態(tài) beginGtendDate為true
        if (
          Date.parse(control.value) > Date.parse(EndDate) ||
          Date.parse(control.value) < Date.parse(StartDate)
        ) {
          return { beginGtendDate: true };
        }
      }
      return null;
    }
  }

“Angular中的響應(yīng)式表單怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！