refactor(cdk:forms): modelRef renamed to valueRef

packages/cdk/forms/__tests__/abstractControl.spec.ts

@@ -5,7 +5,7 @@ import { AsyncValidatorFn, ValidationErrors, ValidatorFn, ValidatorOptions } fro
 import { Validators } from '../src/validators'
 
 class Control<T = unknown> extends AbstractControl<T> {
-  readonly modelRef: Ref<T | null> = ref(null)
+  readonly valueRef: Ref<T | null> = ref(null)
   constructor(
     validatorOrOptions?: ValidatorFn | ValidatorFn[] | ValidatorOptions | null,
     asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
@@ -15,7 +15,7 @@ class Control<T = unknown> extends AbstractControl<T> {
   reset(): void {}
   setValue(_: T | null): void {}
   getValue(): T {
-    return this.modelRef.value as T
+    return this.valueRef.value as T
   }
   markAsBlurred(): void {}
   markAsUnblurred(): void {}
@@ -61,7 +61,7 @@ describe('abstractControl.ts', () => {
       expect(await control.validate()).toEqual({ required: { message: '' } })
 
       control.setValidator([email, minLength(5)])
-      control.modelRef.value = 'test'
+      control.valueRef.value = 'test'
 
       expect(await control.validate()).toEqual({
         email: { message: '', actual: 'test' },
@@ -141,7 +141,7 @@ describe('abstractControl.ts', () => {
       control = new Control(Validators.required, _asyncValidator)
       expect(await control.validate()).toEqual({ required: { message: '' } })
 
-      control.modelRef.value = 'test'
+      control.valueRef.value = 'test'
       control.validate()
 
       expect(control.status.value).toEqual('validating')

packages/cdk/forms/__tests__/formControl.spec.ts

@@ -14,17 +14,17 @@ describe('formControl.ts', () => {
       control.setValue('test')
       control.markAsBlurred()
 
-      expect(control.modelRef.value).toEqual('test')
+      expect(control.valueRef.value).toEqual('test')
       expect(control.blurred.value).toEqual(true)
 
       control.reset()
 
-      expect(control.modelRef.value).toBeNull()
+      expect(control.valueRef.value).toBeNull()
       expect(control.blurred.value).toEqual(false)
     })
 
     test('setValue and getValue work', () => {
-      expect(control.modelRef.value).toBeNull()
+      expect(control.valueRef.value).toBeNull()
 
       control.setValue('test')
 

packages/cdk/forms/__tests__/utils.spec.ts

@@ -8,10 +8,10 @@ const notFindText = 'not find control'
 
 const getComp = () => {
   return {
-    template: `<div>{{ modelRef }}</div>`,
+    template: `<div>{{ valueRef }}</div>`,
     setup() {
-      const { modelRef } = injectControl('control') || { modelRef: notFindText }
-      return { modelRef }
+      const { valueRef } = injectControl('control') || { valueRef: notFindText }
+      return { valueRef }
     },
   }
 }

packages/cdk/forms/src/controls/abstractControl.ts

@@ -24,7 +24,7 @@ export abstract class AbstractControl<T = any> {
   /**
    * The ref value for the control.
    */
-  readonly modelRef!: any
+  readonly valueRef!: any
 
   /**
    * The validation status of the control, there are three possible validation status values:

packages/cdk/forms/src/controls/formArray.ts

@@ -10,7 +10,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
   /**
    * The ref value for the form array.
    */
-  readonly modelRef: Ref<Array<UnwrapRef<T>>>
+  readonly valueRef: Ref<Array<UnwrapRef<T>>>
 
   /**
    * Length of the control array.
@@ -29,7 +29,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
   ) {
     super(validatorOrOptions, asyncValidator)
     controls.forEach(control => control.setParent(this as any))
-    this.modelRef = ref(this._calculateModelRef(controls))
+    this.valueRef = ref(this._calculateValue(controls))
 
     this._watchValid()
     this._watchStatus()
@@ -53,7 +53,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
   push(control: AbstractControl): void {
     this.controls.push(control)
     this._registerControl(control)
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -67,7 +67,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
   insert(index: number, control: AbstractControl): void {
     this.controls.splice(index, 0, control)
     this._registerControl(control)
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -79,7 +79,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
    */
   removeAt(index: number): void {
     this.controls.splice(index, 1)
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -93,7 +93,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
   setControl(index: number, control: AbstractControl): void {
     this.controls.splice(index, 1, control)
     this._registerControl(control)
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -149,7 +149,7 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
 
   private _watchValid() {
     watch(
-      [this.modelRef, this.blurred],
+      [this.valueRef, this.blurred],
       () => {
         if (this.trigger === 'change' || (this.trigger === 'blur' && this.blurred.value)) {
           this._validate()
@@ -196,8 +196,8 @@ export class FormArray<T = any[]> extends AbstractControl<T> {
     })
   }
 
-  private _calculateModelRef(controls: AbstractControl<T>[]) {
-    return controls.map(control => control.modelRef)
+  private _calculateValue(controls: AbstractControl<T>[]) {
+    return controls.map(control => control.valueRef)
   }
 
   private _registerControl(control: AbstractControl<T>) {

packages/cdk/forms/src/controls/formControl.ts

@@ -9,7 +9,7 @@ export class FormControl<T = any> extends AbstractControl<T> {
   /**
    * The ref value for the control.
    */
-  readonly modelRef: Ref<UnwrapRef<T> | null>
+  readonly valueRef: Ref<UnwrapRef<T> | null>
 
   private _initValue: T | null = null
   constructor(
@@ -18,7 +18,7 @@ export class FormControl<T = any> extends AbstractControl<T> {
     asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
   ) {
     super(validatorOrOptions, asyncValidator)
-    this.modelRef = ref(initValue)
+    this.valueRef = ref(initValue)
     this._initValue = initValue
 
     this._watchEffect()
@@ -28,7 +28,7 @@ export class FormControl<T = any> extends AbstractControl<T> {
    * Resets the form control, marking it `unblurred`, and setting the value to initialization value.
    */
   reset(): void {
-    this.modelRef.value = this._initValue as any
+    this.valueRef.value = this._initValue as any
     this.markAsUnblurred()
   }
 
@@ -38,14 +38,14 @@ export class FormControl<T = any> extends AbstractControl<T> {
    * @param value The new value.
    */
   setValue(value: T | null): void {
-    this.modelRef.value = value as any
+    this.valueRef.value = value as any
   }
 
   /**
    * The aggregate value of the form control.
    */
   getValue(): T | null {
-    return this.modelRef.value as T
+    return this.valueRef.value as T
   }
 
   /**
@@ -70,7 +70,7 @@ export class FormControl<T = any> extends AbstractControl<T> {
   }
 
   private _watchEffect() {
-    watch([this.modelRef, this.blurred], () => {
+    watch([this.valueRef, this.blurred], () => {
       if (this.trigger === 'change' || (this.trigger === 'blur' && this.blurred.value)) {
         this._validate()
       }

packages/cdk/forms/src/controls/formGroup.ts

@@ -12,7 +12,7 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
   /**
    * The ref value for the form group.
    */
-  readonly modelRef: Ref<Partial<Record<keyof T, Ref<UnwrapRef<T>>>>>
+  readonly valueRef: Ref<Partial<Record<keyof T, Ref<UnwrapRef<T>>>>>
 
   private _statusWatchStopHandle: WatchStopHandle | null = null
   private _blurredWatchStopHandle: WatchStopHandle | null = null
@@ -24,7 +24,7 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
   ) {
     super(validatorOrOptions, asyncValidator)
     this._forEachChild(control => control.setParent(this as any))
-    this.modelRef = ref(this._calculateModelRef(controls)) as Ref<Partial<Record<keyof T, Ref<UnwrapRef<T>>>>>
+    this.valueRef = ref(this._calculateValue(controls)) as Ref<Partial<Record<keyof T, Ref<UnwrapRef<T>>>>>
 
     this._watchValid()
     this._watchStatus()
@@ -39,7 +39,7 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
    */
   addControl(name: keyof T, control: AbstractControl): void {
     this._registerControl(name, control)
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -51,7 +51,7 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
    */
   removeControl(name: keyof T): void {
     delete this.controls[name]
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -65,7 +65,7 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
   setControl(name: keyof T, control: AbstractControl): void {
     delete this.controls[name]
     this._registerControl(name, control)
-    this.modelRef.value = this._calculateModelRef(this.controls)
+    this.valueRef.value = this._calculateValue(this.controls)
     this._watchStatus()
     this._watchBlurred()
   }
@@ -123,7 +123,7 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
 
   private _watchValid() {
     watch(
-      [this.modelRef, this.blurred],
+      [this.valueRef, this.blurred],
       () => {
         if (this.trigger === 'change' || (this.trigger === 'blur' && this.blurred.value)) {
           this._validate()
@@ -170,14 +170,14 @@ export class FormGroup<T = Record<string, any>> extends AbstractControl<T> {
     })
   }
 
-  private _calculateModelRef(controls: Partial<Record<keyof T, AbstractControl<T>>>) {
-    const model = {} as Partial<Record<keyof T, Ref<UnwrapRef<T>>>>
+  private _calculateValue(controls: Partial<Record<keyof T, AbstractControl<T>>>) {
+    const value = {} as Partial<Record<keyof T, Ref<UnwrapRef<T>>>>
 
     Object.keys(controls).forEach(key => {
-      model[key as keyof T] = controls[key as keyof T]!.modelRef
+      value[key as keyof T] = controls[key as keyof T]!.valueRef
     })
 
-    return model
+    return value
   }
 
   private _registerControl(name: keyof T, control: AbstractControl<T>) {

packages/cdk/forms/src/utils.ts

@@ -10,6 +10,6 @@ export function provideControl(control: AbstractControl): void {
 }
 
 export function injectControl(path: Array<string | number> | string): AbstractControl | null {
-  const controlParent = inject(token)
+  const controlParent = inject(token, null)
   return controlParent ? controlParent.get(path) : null
 }