refactor(forms): Remove readonly getters in forms (#19188)

PR Close #19188

packages/forms/src/directives/ng_form.ts

@@ -65,7 +65,8 @@ const resolvedPromise = Promise.resolve(null);
 })
 export class NgForm extends ControlContainer implements Form,
     AfterViewInit {
-  private _submitted: boolean = false;
+  public readonly submitted: boolean = false;
+
   private _directives: NgModel[] = [];
 
   form: FormGroup;
@@ -97,8 +98,6 @@ export class NgForm extends ControlContainer implements Form,
 
   ngAfterViewInit() { this._setUpdateStrategy(); }
 
-  get submitted(): boolean { return this._submitted; }
-
   get formDirective(): Form { return this; }
 
   get control(): FormGroup { return this.form; }
@@ -110,7 +109,8 @@ export class NgForm extends ControlContainer implements Form,
   addControl(dir: NgModel): void {
     resolvedPromise.then(() => {
       const container = this._findContainer(dir.path);
-      dir._control = <FormControl>container.registerControl(dir.name, dir.control);
+      (dir as{control: FormControl}).control =
+          <FormControl>container.registerControl(dir.name, dir.control);
       setUpControl(dir.control, dir);
       dir.control.updateValueAndValidity({emitEvent: false});
       this._directives.push(dir);
@@ -160,7 +160,7 @@ export class NgForm extends ControlContainer implements Form,
   setValue(value: {[key: string]: any}): void { this.control.setValue(value); }
 
   onSubmit($event: Event): boolean {
-    this._submitted = true;
+    (this as{submitted: boolean}).submitted = true;
     syncPendingControls(this.form, this._directives);
     this.ngSubmit.emit($event);
     return false;
@@ -170,7 +170,7 @@ export class NgForm extends ControlContainer implements Form,
 
   resetForm(value: any = undefined): void {
     this.form.reset(value);
-    this._submitted = false;
+    (this as{submitted: boolean}).submitted = false;
   }
 
   private _setUpdateStrategy() {

packages/forms/src/directives/ng_model.ts

@@ -110,8 +110,7 @@ const resolvedPromise = Promise.resolve(null);
 })
 export class NgModel extends NgControl implements OnChanges,
     OnDestroy {
-  /** @internal */
-  _control = new FormControl();
+  public readonly control: FormControl = new FormControl();
   /** @internal */
   _registered = false;
   viewModel: any;
@@ -188,8 +187,6 @@ export class NgModel extends NgControl implements OnChanges,
 
               ngOnDestroy(): void { this.formDirective && this.formDirective.removeControl(this); }
 
-              get control(): FormControl { return this._control; }
-
               get path(): string[] {
                 return this._parent ? controlPath(this.name, this._parent) : [this.name];
               }
@@ -216,7 +213,7 @@ export class NgModel extends NgControl implements OnChanges,
 
               private _setUpdateStrategy(): void {
                 if (this.options && this.options.updateOn != null) {
-                  this._control._updateOn = this.options.updateOn;
+                  this.control._updateOn = this.options.updateOn;
                 }
               }
 
@@ -225,8 +222,8 @@ export class NgModel extends NgControl implements OnChanges,
               }
 
               private _setUpStandalone(): void {
-                setUpControl(this._control, this);
-                this._control.updateValueAndValidity({emitEvent: false});
+                setUpControl(this.control, this);
+                this.control.updateValueAndValidity({emitEvent: false});
               }
 
               private _checkForErrors(): void {

packages/forms/src/directives/reactive_directives/form_control_name.ts

@@ -82,8 +82,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
   private _added = false;
   /** @internal */
   viewModel: any;
-  /** @internal */
-  _control: FormControl;
+  readonly control: FormControl;
 
   @Input('formControlName') name: string;
 
@@ -135,8 +134,6 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
     return composeAsyncValidators(this._rawAsyncValidators) !;
   }
 
-  get control(): FormControl { return this._control; }
-
   private _checkParentType(): void {
     if (!(this._parent instanceof FormGroupName) &&
         this._parent instanceof AbstractFormGroupDirective) {
@@ -150,7 +147,7 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
 
   private _setUpControl() {
     this._checkParentType();
-    this._control = this.formDirective.addControl(this);
+    (this as{control: FormControl}).control = this.formDirective.addControl(this);
     if (this.control.disabled && this.valueAccessor !.setDisabledState) {
       this.valueAccessor !.setDisabledState !(true);
     }

packages/forms/src/directives/reactive_directives/form_group_directive.ts

@@ -66,7 +66,8 @@ export const formDirectiveProvider: any = {
 })
 export class FormGroupDirective extends ControlContainer implements Form,
     OnChanges {
-  private _submitted: boolean = false;
+  public readonly submitted: boolean = false;
+
   private _oldForm: FormGroup;
   directives: FormControlName[] = [];
 
@@ -88,8 +89,6 @@ export class FormGroupDirective extends ControlContainer implements Form,
     }
   }
 
-  get submitted(): boolean { return this._submitted; }
-
   get formDirective(): Form { return this; }
 
   get control(): FormGroup { return this.form; }
@@ -134,7 +133,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
   }
 
   onSubmit($event: Event): boolean {
-    this._submitted = true;
+    (this as{submitted: boolean}).submitted = true;
     syncPendingControls(this.form, this.directives);
     this.ngSubmit.emit($event);
     return false;
@@ -144,7 +143,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
 
   resetForm(value: any = undefined): void {
     this.form.reset(value);
-    this._submitted = false;
+    (this as{submitted: boolean}).submitted = false;
   }
 
 
@@ -152,10 +151,10 @@ export class FormGroupDirective extends ControlContainer implements Form,
   _updateDomValue() {
     this.directives.forEach(dir => {
       const newCtrl: any = this.form.get(dir.path);
-      if (dir._control !== newCtrl) {
-        cleanUpControl(dir._control, dir);
+      if (dir.control !== newCtrl) {
+        cleanUpControl(dir.control, dir);
         if (newCtrl) setUpControl(newCtrl, dir);
-        dir._control = newCtrl;
+        (dir as{control: FormControl}).control = newCtrl;
       }
     });
 

packages/forms/test/directives_spec.ts

@@ -650,7 +650,7 @@ export function main() {
         parent.form = new FormGroup({'name': formModel});
         controlNameDir = new FormControlName(parent, [], [], [defaultAccessor]);
         controlNameDir.name = 'name';
-        controlNameDir._control = formModel;
+        (controlNameDir as{control: FormControl}).control = formModel;
       });
 
       it('should reexport control properties', () => {

packages/forms/test/value_accessor_integration_spec.ts

@@ -1397,4 +1397,4 @@ export class NgModelCustomComp implements ControlValueAccessor {
 export class NgModelCustomWrapper {
   name: string;
   isDisabled = false;
-}
+}