diff --git a/packages/cdk/forms/__tests__/abstractControl.spec.ts b/packages/cdk/forms/__tests__/abstractControl.spec.ts index c0eaa3f9e..eb5c90f51 100644 --- a/packages/cdk/forms/__tests__/abstractControl.spec.ts +++ b/packages/cdk/forms/__tests__/abstractControl.spec.ts @@ -5,7 +5,7 @@ import { AsyncValidatorFn, ValidationErrors, ValidatorFn, ValidatorOptions } fro import { Validators } from '../src/validators' class Control extends AbstractControl { - readonly modelRef: Ref = ref(null) + readonly valueRef: Ref = ref(null) constructor( validatorOrOptions?: ValidatorFn | ValidatorFn[] | ValidatorOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null, @@ -15,7 +15,7 @@ class Control extends AbstractControl { 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') diff --git a/packages/cdk/forms/__tests__/formControl.spec.ts b/packages/cdk/forms/__tests__/formControl.spec.ts index 219c78ba2..701189aca 100644 --- a/packages/cdk/forms/__tests__/formControl.spec.ts +++ b/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') diff --git a/packages/cdk/forms/__tests__/utils.spec.ts b/packages/cdk/forms/__tests__/utils.spec.ts index b5c65103f..2647a5513 100644 --- a/packages/cdk/forms/__tests__/utils.spec.ts +++ b/packages/cdk/forms/__tests__/utils.spec.ts @@ -8,10 +8,10 @@ const notFindText = 'not find control' const getComp = () => { return { - template: `
{{ modelRef }}
`, + template: `
{{ valueRef }}
`, setup() { - const { modelRef } = injectControl('control') || { modelRef: notFindText } - return { modelRef } + const { valueRef } = injectControl('control') || { valueRef: notFindText } + return { valueRef } }, } } diff --git a/packages/cdk/forms/src/controls/abstractControl.ts b/packages/cdk/forms/src/controls/abstractControl.ts index 596274b51..964785dde 100644 --- a/packages/cdk/forms/src/controls/abstractControl.ts +++ b/packages/cdk/forms/src/controls/abstractControl.ts @@ -24,7 +24,7 @@ export abstract class AbstractControl { /** * 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: diff --git a/packages/cdk/forms/src/controls/formArray.ts b/packages/cdk/forms/src/controls/formArray.ts index 3eb7bd59d..4c0d8f55c 100644 --- a/packages/cdk/forms/src/controls/formArray.ts +++ b/packages/cdk/forms/src/controls/formArray.ts @@ -10,7 +10,7 @@ export class FormArray extends AbstractControl { /** * The ref value for the form array. */ - readonly modelRef: Ref>> + readonly valueRef: Ref>> /** * Length of the control array. @@ -29,7 +29,7 @@ export class FormArray extends AbstractControl { ) { 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 extends AbstractControl { 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 extends AbstractControl { 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 extends AbstractControl { */ 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 extends AbstractControl { 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 extends AbstractControl { 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 extends AbstractControl { }) } - private _calculateModelRef(controls: AbstractControl[]) { - return controls.map(control => control.modelRef) + private _calculateValue(controls: AbstractControl[]) { + return controls.map(control => control.valueRef) } private _registerControl(control: AbstractControl) { diff --git a/packages/cdk/forms/src/controls/formControl.ts b/packages/cdk/forms/src/controls/formControl.ts index f9228da83..e054a5c86 100644 --- a/packages/cdk/forms/src/controls/formControl.ts +++ b/packages/cdk/forms/src/controls/formControl.ts @@ -9,7 +9,7 @@ export class FormControl extends AbstractControl { /** * The ref value for the control. */ - readonly modelRef: Ref | null> + readonly valueRef: Ref | null> private _initValue: T | null = null constructor( @@ -18,7 +18,7 @@ export class FormControl extends AbstractControl { 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 extends AbstractControl { * 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 extends AbstractControl { * @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 extends AbstractControl { } private _watchEffect() { - watch([this.modelRef, this.blurred], () => { + watch([this.valueRef, this.blurred], () => { if (this.trigger === 'change' || (this.trigger === 'blur' && this.blurred.value)) { this._validate() } diff --git a/packages/cdk/forms/src/controls/formGroup.ts b/packages/cdk/forms/src/controls/formGroup.ts index 364a5071f..5666439e8 100644 --- a/packages/cdk/forms/src/controls/formGroup.ts +++ b/packages/cdk/forms/src/controls/formGroup.ts @@ -12,7 +12,7 @@ export class FormGroup> extends AbstractControl { /** * The ref value for the form group. */ - readonly modelRef: Ref>>>> + readonly valueRef: Ref>>>> private _statusWatchStopHandle: WatchStopHandle | null = null private _blurredWatchStopHandle: WatchStopHandle | null = null @@ -24,7 +24,7 @@ export class FormGroup> extends AbstractControl { ) { super(validatorOrOptions, asyncValidator) this._forEachChild(control => control.setParent(this as any)) - this.modelRef = ref(this._calculateModelRef(controls)) as Ref>>>> + this.valueRef = ref(this._calculateValue(controls)) as Ref>>>> this._watchValid() this._watchStatus() @@ -39,7 +39,7 @@ export class FormGroup> extends AbstractControl { */ 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> extends AbstractControl { */ 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> extends AbstractControl { 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> extends AbstractControl { 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> extends AbstractControl { }) } - private _calculateModelRef(controls: Partial>>) { - const model = {} as Partial>>> + private _calculateValue(controls: Partial>>) { + const value = {} as Partial>>> 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) { diff --git a/packages/cdk/forms/src/utils.ts b/packages/cdk/forms/src/utils.ts index 5a662fd18..db937d3b5 100644 --- a/packages/cdk/forms/src/utils.ts +++ b/packages/cdk/forms/src/utils.ts @@ -10,6 +10,6 @@ export function provideControl(control: AbstractControl): void { } export function injectControl(path: Array | string): AbstractControl | null { - const controlParent = inject(token) + const controlParent = inject(token, null) return controlParent ? controlParent.get(path) : null }