angular11源码探索十二[表单基础篇一]

基础部分

• FormControl 实例用于追踪单个表单控件的值和验证状态。
• FormGroup 用于追踪一个表单控件组的值和状态。
• FormArray 用于追踪表单控件数组的值和状态。
• ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。

导入模块

@NgModule({
    imports:[
     FormsModule, ReactiveFormsModule   
    ]
})

第一种形式

names1 = new FormControl('');
<input type="text" [formControl]="names1">

第二种双向数据绑定

<input type="text" [(ngModel)]="name1">

第三种

  profileForm:FormGroup = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address:new FormGroup({
      name1:new FormControl(''),
      name2:new FormControl('')
    })
  });

<form [formGroup]="profileForm" (ngSubmit)="onSub()">
  <div>
    <label>
      <input type="text" formControlName="firstName">
    </label>
  </div>
  <div formGroupName="address">
    <div>
      <input type="text" formControlName="name1">
    </div>
  </div>
</form>

第四种

  profileForm:FormGroup=this.fb.group({
    firstName:['aa'],
    address:this.fb.group({
      name1:['bbb']
    })
  })
constructor(private fb: FormBuilder) { }

html跟第三种一种

第五种,添加数组的形式

 constructor(private fb: FormBuilder) {}

  profileForm: FormGroup = this.fb.group({
    firstName: ['aa'],
    address: this.fb.group({
      name1: ['bbb'],
    }),
    name2: this.fb.array([
      this.fb.control('ccc'),
    ])
  })
  get name2(){
    return this.profileForm.get('name2') as FromArray;
  }

另一种

  profileForm:FormGroup = new FormGroup({
    firstName: new FormControl('aaa'),
    address:new FormGroup({
      name1:new FormControl('bbb'),
    }),
    name2:new FormArray([
      new FormControl('ccc')
    ])
  });

html

<form [formGroup]="profileForm" (ngSubmit)="onSub()">
  <div>
    <label>
      <input type="text" formControlName="firstName">
    </label>
  </div>
  <div formGroupName="address">
    <div>
      <input type="text" formControlName="name1">
    </div>
  </div>
  <div formArrayName="name2">
    <div *ngFor="let item of name2.controls;let i=index">
      <label>
        <input type="text" [formControlName]="i">
      </label>
    </div>
  </div>
</form>

FormArray

api

增删查找的

    controls: AbstractControl[]  查询
    length: number   			长度
    push(control: AbstractControl): void  增加
    removeAt(index: number): void   删除指定的
    clear(): void 删除全部
    insert(index: number, control: AbstractControl): void  某个位置后插入一个
    at(index: number): AbstractControl   拿到第几个
    patchValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void   设置值包括禁用的值
  reset(value: any = [], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void  清空
  getRawValue(): any[]  查询值,包括禁用的
  setControl(index: number, control: AbstractControl): void 替换
  setValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void   设置值,不包括禁用

继承自 forms/AbstractControl

  value: any   拿到需要值
touched: boolean  一旦触碰,则为true(好像是失去焦点吧)

<form [formGroup]="profileForm" (ngSubmit)="onSub()">
  <div formArrayName="nameArr">
    <div *ngFor="let item of nameArr.controls;let i=index">
      <label>
        <input type="text" [formControlName]="i">
      </label>
    </div>
  </div>
</form>
<button (click)="addForm(3)">增加</button>
<button (click)="removeForm(2)">删除第三个</button>
<button (click)="removeClear()">删除全部</button>
<button (click)="insertForm()">在第三个后插入一个</button>
<button (click)="valueSub()">查询拿到数组的值</button>
<button (click)="atValue()">拿到第2个的AbstractControl 禁用</button> <br>
<button (click)="setValues()">设置</button>

profileForm: FormGroup = new FormGroup({
    nameArr: new FormArray([
      new FormControl('ccc')
    ])
  });
 setCon(){
     // 把所以为2的替换成空的
    this.nameArr.setControl(2,this.control)
  }
  get nameArr() :FormArray{
    return this.profileForm.get('nameArr') as FromArray;
  }

  formCon(n) {
    return new FormControl(n)
  }

  //增加
  addForm(num) {
    this.nameArr.push(this.formCon(num))
  }

  //删除
  removeForm(num: number) {
    this.nameArr.removeAt(num)
  }

// 清除全部
  removeClear() {
    this.nameArr.clear();
  }

  //位置插入
  insertForm() {
    this.nameArr.insert(3, this.formCon('bbb'))
  }
  //查询某项
  get getTwo():FormControl{
    return this.nameArr.at(1) as FormControl;
  }

  //查询数组整体的值
  valueSub() {
    // console.log(this.nameArr.value);//禁用的拿不到
    console.log(this.nameArr.getRawValue());//这个禁用也能拿到

  }
  setValues(){
    this.nameArr.patchValue([111,222])
    // this.nameArr.setValue([111,222]) //严谨一些多了少了都会报错
    // this.nameArr.setValue([111,222],{ onlySelf: true }) //严谨一些多了少了都会报错
    // { onlySelf: true } 就是更改的值不更新给父级
  }
  //查询指定的那一个AbstractControl 禁用
  atValue() {
    this.nameArr.at(2).disable();
  }

修改,你有没有觉得这样写不够优雅

<form [formGroup]="profileForm" (ngSubmit)="onSub()">
  <div formArrayName="nameArr">
    <div *ngFor="let item of nameArr.controls;let i=index">
      <label>
        <input type="text" [formControlName]="i">
      </label>
    </div>
  </div>
</form>

 nameArr: FormArray = new FormArray([])
  profileForm: FormGroup;

  ngAfterViewInit() {
  }
  ngOnInit(): void {
    this.profileForm = new FormGroup({
      nameArr:this.nameArr
    });
  }
  get control(): FormControl {
    return new FormControl()
  }

  addControl() {
    this.nameArr.push(this.control)
  }