build(bazel): Turning on strictPropertyInitialization for Angular. (#24572)

All errors for existing fields have been detected and suppressed with a
`!` assertion.

Issue/24571 is tracking proper clean up of those instances.

One-line change required in ivy/compilation.ts, because it appears that
the new syntax causes tsickle emitted node to no longer track their
original sourceFiles.

PR Close #24572

packages/forms/src/directives/abstract_form_group_directive.ts

@@ -24,13 +24,16 @@ import {AsyncValidatorFn, ValidatorFn} from './validators';
  */
 export class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {
   /** @internal */
-  _parent: ControlContainer;
+  // TODO(issue/24571): remove '!'.
+  _parent !: ControlContainer;
 
   /** @internal */
-  _validators: any[];
+  // TODO(issue/24571): remove '!'.
+  _validators !: any[];
 
   /** @internal */
-  _asyncValidators: any[];
+  // TODO(issue/24571): remove '!'.
+  _asyncValidators !: any[];
 
   ngOnInit(): void {
     this._checkParentType();

packages/forms/src/directives/control_container.ts

@@ -18,7 +18,8 @@ import {Form} from './form_interface';
  *
  */
 export abstract class ControlContainer extends AbstractControlDirective {
-  name: string;
+  // TODO(issue/24571): remove '!'.
+  name !: string;
 
   /**
    * Get the form to which this container belongs.

packages/forms/src/directives/ng_form.ts

@@ -93,7 +93,8 @@ export class NgForm extends ControlContainer implements Form,
    * ```
    *
    */
-  @Input('ngFormOptions') options: {updateOn?: FormHooks};
+  // TODO(issue/24571): remove '!'.
+  @Input('ngFormOptions') options !: {updateOn?: FormHooks};
 
   constructor(
       @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],

packages/forms/src/directives/ng_model.ts

@@ -115,8 +115,10 @@ export class NgModel extends NgControl implements OnChanges,
   _registered = false;
   viewModel: any;
 
-  @Input() name: string;
-  @Input('disabled') isDisabled: boolean;
+  // TODO(issue/24571): remove '!'.
+  @Input() name !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('disabled') isDisabled !: boolean;
   @Input('ngModel') model: any;
 
   /**
@@ -156,7 +158,9 @@ export class NgModel extends NgControl implements OnChanges,
    * ```
    *
    */
-  @Input('ngModelOptions') options: {name?: string, standalone?: boolean, updateOn?: FormHooks};
+  // TODO(issue/24571): remove '!'.
+  @Input('ngModelOptions')
+  options !: {name?: string, standalone?: boolean, updateOn?: FormHooks};
 
   @Output('ngModelChange') update = new EventEmitter();
 

packages/forms/src/directives/ng_model_group.ts

@@ -47,7 +47,8 @@ export const modelGroupProvider: any = {
  */
 @Directive({selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup'})
 export class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
-  @Input('ngModelGroup') name: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('ngModelGroup') name !: string;
 
   constructor(
       @Host() @SkipSelf() parent: ControlContainer,

packages/forms/src/directives/radio_control_value_accessor.ts

@@ -92,16 +92,21 @@ export class RadioControlRegistry {
 export class RadioControlValueAccessor implements ControlValueAccessor,
     OnDestroy, OnInit {
   /** @internal */
-  _state: boolean;
+  // TODO(issue/24571): remove '!'.
+  _state !: boolean;
   /** @internal */
-  _control: NgControl;
+  // TODO(issue/24571): remove '!'.
+  _control !: NgControl;
   /** @internal */
-  _fn: Function;
+  // TODO(issue/24571): remove '!'.
+  _fn !: Function;
   onChange = () => {};
   onTouched = () => {};
 
-  @Input() name: string;
-  @Input() formControlName: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() name !: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() formControlName !: string;
   @Input() value: any;
 
   constructor(

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

@@ -141,7 +141,8 @@ export const formControlBinding: any = {
 export class FormControlDirective extends NgControl implements OnChanges {
   viewModel: any;
 
-  @Input('formControl') form: FormControl;
+  // TODO(issue/24571): remove '!'.
+  @Input('formControl') form !: FormControl;
 
   @Input('disabled')
   set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }

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

@@ -153,9 +153,11 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
   private _added = false;
   /** @internal */
   viewModel: any;
-  readonly control: FormControl;
+  // TODO(issue/24571): remove '!'.
+  readonly control !: FormControl;
 
-  @Input('formControlName') name: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('formControlName') name !: string;
 
   @Input('disabled')
   set isDisabled(isDisabled: boolean) { ReactiveErrors.disabledAttrWarning(); }

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

@@ -68,7 +68,8 @@ export class FormGroupDirective extends ControlContainer implements Form,
     OnChanges {
   public readonly submitted: boolean = false;
 
-  private _oldForm: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  private _oldForm !: FormGroup;
   directives: FormControlName[] = [];
 
   @Input('formGroup') form: FormGroup = null !;

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

@@ -69,7 +69,8 @@ export const formGroupNameProvider: any = {
  */
 @Directive({selector: '[formGroupName]', providers: [formGroupNameProvider]})
 export class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
-  @Input('formGroupName') name: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('formGroupName') name !: string;
 
   constructor(
       @Optional() @Host() @SkipSelf() parent: ControlContainer,
@@ -152,7 +153,8 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
   /** @internal */
   _asyncValidators: any[];
 
-  @Input('formArrayName') name: string;
+  // TODO(issue/24571): remove '!'.
+  @Input('formArrayName') name !: string;
 
   constructor(
       @Optional() @Host() @SkipSelf() parent: ControlContainer,

packages/forms/src/directives/select_control_value_accessor.ts

@@ -168,7 +168,8 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
  */
 @Directive({selector: 'option'})
 export class NgSelectOption implements OnDestroy {
-  id: string;
+  // TODO(issue/24571): remove '!'.
+  id !: string;
 
   constructor(
       private _element: ElementRef, private _renderer: Renderer2,

packages/forms/src/directives/select_multiple_control_value_accessor.ts

@@ -35,7 +35,8 @@ interface HTMLOption {
 
 /** Mock interface for HTMLCollection */
 abstract class HTMLCollection {
-  length: number;
+  // TODO(issue/24571): remove '!'.
+  length !: number;
   abstract item(_: number): HTMLOption;
 }
 
@@ -177,7 +178,8 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
  */
 @Directive({selector: 'option'})
 export class NgSelectMultipleOption implements OnDestroy {
-  id: string;
+  // TODO(issue/24571): remove '!'.
+  id !: string;
   /** @internal */
   _value: any;
 

packages/forms/src/directives/validators.ts

@@ -79,8 +79,10 @@ export const CHECKBOX_REQUIRED_VALIDATOR: StaticProvider = {
   host: {'[attr.required]': 'required ? "" : null'}
 })
 export class RequiredValidator implements Validator {
-  private _required: boolean;
-  private _onChange: () => void;
+  // TODO(issue/24571): remove '!'.
+  private _required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
 
   @Input()
   get required(): boolean|string { return this._required; }
@@ -150,8 +152,10 @@ export const EMAIL_VALIDATOR: any = {
   providers: [EMAIL_VALIDATOR]
 })
 export class EmailValidator implements Validator {
-  private _enabled: boolean;
-  private _onChange: () => void;
+  // TODO(issue/24571): remove '!'.
+  private _enabled !: boolean;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
 
   @Input()
   set email(value: boolean|string) {
@@ -198,10 +202,13 @@ export const MIN_LENGTH_VALIDATOR: any = {
 })
 export class MinLengthValidator implements Validator,
     OnChanges {
-  private _validator: ValidatorFn;
-  private _onChange: () => void;
+  // TODO(issue/24571): remove '!'.
+  private _validator !: ValidatorFn;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
 
-  @Input() minlength: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() minlength !: string;
 
   ngOnChanges(changes: SimpleChanges): void {
     if ('minlength' in changes) {
@@ -248,10 +255,13 @@ export const MAX_LENGTH_VALIDATOR: any = {
 })
 export class MaxLengthValidator implements Validator,
     OnChanges {
-  private _validator: ValidatorFn;
-  private _onChange: () => void;
+  // TODO(issue/24571): remove '!'.
+  private _validator !: ValidatorFn;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
 
-  @Input() maxlength: string;
+  // TODO(issue/24571): remove '!'.
+  @Input() maxlength !: string;
 
   ngOnChanges(changes: SimpleChanges): void {
     if ('maxlength' in changes) {
@@ -299,10 +309,13 @@ export const PATTERN_VALIDATOR: any = {
 })
 export class PatternValidator implements Validator,
     OnChanges {
-  private _validator: ValidatorFn;
-  private _onChange: () => void;
+  // TODO(issue/24571): remove '!'.
+  private _validator !: ValidatorFn;
+  // TODO(issue/24571): remove '!'.
+  private _onChange !: () => void;
 
-  @Input() pattern: string|RegExp;
+  // TODO(issue/24571): remove '!'.
+  @Input() pattern !: string | RegExp;
 
   ngOnChanges(changes: SimpleChanges): void {
     if ('pattern' in changes) {

packages/forms/src/model.ts

@@ -133,18 +133,22 @@ function isOptionsObj(
  */
 export abstract class AbstractControl {
   /** @internal */
-  _pendingDirty: boolean;
+  // TODO(issue/24571): remove '!'.
+  _pendingDirty !: boolean;
 
   /** @internal */
-  _pendingTouched: boolean;
+  // TODO(issue/24571): remove '!'.
+  _pendingTouched !: boolean;
 
   /** @internal */
   _onCollectionChange = () => {};
 
   /** @internal */
-  _updateOn: FormHooks;
+  // TODO(issue/24571): remove '!'.
+  _updateOn !: FormHooks;
 
-  private _parent: FormGroup|FormArray;
+  // TODO(issue/24571): remove '!'.
+  private _parent !: FormGroup | FormArray;
   private _asyncValidationSubscription: any;
 
   /**
@@ -184,7 +188,8 @@ export abstract class AbstractControl {
    * These status values are mutually exclusive, so a control cannot be
    * both valid AND invalid or invalid AND disabled.
    */
-  public readonly status: string;
+  // TODO(issue/24571): remove '!'.
+  public readonly status !: string;
 
   /**
    * A control is `valid` when its `status` is `VALID`.
@@ -244,7 +249,8 @@ export abstract class AbstractControl {
    * An object containing any errors generated by failing validation,
    * or null if there are no errors.
    */
-  public readonly errors: ValidationErrors|null;
+  // TODO(issue/24571): remove '!'.
+  public readonly errors !: ValidationErrors | null;
 
   /**
    * A control is `pristine` if the user has not yet changed
@@ -284,13 +290,15 @@ export abstract class AbstractControl {
    * A multicasting observable that emits an event every time the value of the control changes, in
    * the UI or programmatically.
    */
-  public readonly valueChanges: Observable<any>;
+  // TODO(issue/24571): remove '!'.
+  public readonly valueChanges !: Observable<any>;
 
   /**
    * A multicasting observable that emits an event every time the validation `status` of the control
    * recalculates.
    */
-  public readonly statusChanges: Observable<any>;
+  // TODO(issue/24571): remove '!'.
+  public readonly statusChanges !: Observable<any>;
 
   /**
    * Reports the update strategy of the `AbstractControl` (meaning

packages/forms/test/reactive_integration_spec.ts

@@ -2467,7 +2467,8 @@ function sortedClassList(el: HTMLElement) {
 
 @Component({selector: 'form-control-comp', template: `<input type="text" [formControl]="control">`})
 class FormControlComp {
-  control: FormControl;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
 }
 
 @Component({
@@ -2478,9 +2479,12 @@ class FormControlComp {
     </form>`
 })
 class FormGroupComp {
-  control: FormControl;
-  form: FormGroup;
-  event: Event;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  event !: Event;
 }
 
 @Component({
@@ -2495,7 +2499,8 @@ class FormGroupComp {
     </form>`
 })
 class NestedFormGroupComp {
-  form: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
 }
 
 @Component({
@@ -2510,8 +2515,10 @@ class NestedFormGroupComp {
      </form>`
 })
 class FormArrayComp {
-  form: FormGroup;
-  cityArray: FormArray;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  cityArray !: FormArray;
 }
 
 @Component({
@@ -2527,8 +2534,10 @@ class FormArrayComp {
      </div>`
 })
 class FormArrayNestedGroup {
-  form: FormGroup;
-  cityArray: FormArray;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  cityArray !: FormArray;
 }
 
 @Component({
@@ -2540,9 +2549,12 @@ class FormArrayNestedGroup {
    </form>`
 })
 class FormGroupNgModel {
-  form: FormGroup;
-  login: string;
-  password: string;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  login !: string;
+  // TODO(issue/24571): remove '!'.
+  password !: string;
 }
 
 @Component({
@@ -2553,10 +2565,14 @@ class FormGroupNgModel {
   `
 })
 class FormControlNgModel {
-  control: FormControl;
-  login: string;
-  passwordControl: FormControl;
-  password: string;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  login !: string;
+  // TODO(issue/24571): remove '!'.
+  passwordControl !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  password !: string;
 }
 
 @Component({
@@ -2570,7 +2586,8 @@ class FormControlNgModel {
    </div>`
 })
 class LoginIsEmptyWrapper {
-  form: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
 }
 
 @Component({
@@ -2584,11 +2601,16 @@ class LoginIsEmptyWrapper {
    </div>`
 })
 class ValidationBindingsForm {
-  form: FormGroup;
-  required: boolean;
-  minLen: number;
-  maxLen: number;
-  pattern: string;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  minLen !: number;
+  // TODO(issue/24571): remove '!'.
+  maxLen !: number;
+  // TODO(issue/24571): remove '!'.
+  pattern !: string;
 }
 
 @Component({
@@ -2596,7 +2618,8 @@ class ValidationBindingsForm {
   template: `<input type="checkbox" [formControl]="control">`
 })
 class FormControlCheckboxRequiredValidator {
-  control: FormControl;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
 }
 
 @Component({
@@ -2607,5 +2630,6 @@ class FormControlCheckboxRequiredValidator {
   </div>`
 })
 class UniqLoginWrapper {
-  form: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
 }

packages/forms/test/template_integration_spec.ts

@@ -1640,7 +1640,8 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
   `
 })
 class StandaloneNgModel {
-  name: string;
+  // TODO(issue/24571): remove '!'.
+  name !: string;
 }
 
 @Component({
@@ -1652,8 +1653,10 @@ class StandaloneNgModel {
   `
 })
 class NgModelForm {
-  name: string;
-  event: Event;
+  // TODO(issue/24571): remove '!'.
+  name !: string;
+  // TODO(issue/24571): remove '!'.
+  event !: Event;
   options = {};
 
   onReset() {}
@@ -1676,10 +1679,14 @@ class NgModelNativeValidateForm {
   `
 })
 class NgModelGroupForm {
-  first: string;
-  last: string;
-  email: string;
-  isDisabled: boolean;
+  // TODO(issue/24571): remove '!'.
+  first !: string;
+  // TODO(issue/24571): remove '!'.
+  last !: string;
+  // TODO(issue/24571): remove '!'.
+  email !: string;
+  // TODO(issue/24571): remove '!'.
+  isDisabled !: boolean;
   options = {updateOn: 'change'};
 }
 
@@ -1695,7 +1702,8 @@ class NgModelGroupForm {
   `
 })
 class NgModelValidBinding {
-  first: string;
+  // TODO(issue/24571): remove '!'.
+  first !: string;
 }
 
 
@@ -1711,10 +1719,12 @@ class NgModelValidBinding {
   `
 })
 class NgModelNgIfForm {
-  first: string;
+  // TODO(issue/24571): remove '!'.
+  first !: string;
   groupShowing = true;
   emailShowing = true;
-  email: string;
+  // TODO(issue/24571): remove '!'.
+  email !: string;
 }
 
 @Component({
@@ -1749,8 +1759,10 @@ class InvalidNgModelNoName {
   `
 })
 class NgModelOptionsStandalone {
-  one: string;
-  two: string;
+  // TODO(issue/24571): remove '!'.
+  one !: string;
+  // TODO(issue/24571): remove '!'.
+  two !: string;
   options: {name?: string, standalone?: boolean, updateOn?: string} = {standalone: true};
   formOptions = {};
 }
@@ -1767,10 +1779,14 @@ class NgModelOptionsStandalone {
   `
 })
 class NgModelValidationBindings {
-  required: boolean;
-  minLen: number;
-  maxLen: number;
-  pattern: string;
+  // TODO(issue/24571): remove '!'.
+  required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  minLen !: number;
+  // TODO(issue/24571): remove '!'.
+  maxLen !: number;
+  // TODO(issue/24571): remove '!'.
+  pattern !: string;
 }
 
 @Component({
@@ -1782,9 +1798,12 @@ class NgModelValidationBindings {
   `
 })
 class NgModelMultipleValidators {
-  required: boolean;
-  minLen: number;
-  pattern: string|RegExp;
+  // TODO(issue/24571): remove '!'.
+  required !: boolean;
+  // TODO(issue/24571): remove '!'.
+  minLen !: number;
+  // TODO(issue/24571): remove '!'.
+  pattern !: string | RegExp;
 }
 
 @Component({
@@ -1832,7 +1851,8 @@ class NgModelAsyncValidation {
   `
 })
 class NgModelChangesForm {
-  name: string;
+  // TODO(issue/24571): remove '!'.
+  name !: string;
   events: string[] = [];
   options: any;
 

packages/forms/test/value_accessor_integration_spec.ts

@@ -1088,7 +1088,8 @@ import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util'
 
 @Component({selector: 'form-control-comp', template: `<input type="text" [formControl]="control">`})
 export class FormControlComp {
-  control: FormControl;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
 }
 
 @Component({
@@ -1099,10 +1100,14 @@ export class FormControlComp {
     </form>`
 })
 export class FormGroupComp {
-  control: FormControl;
-  form: FormGroup;
-  myGroup: FormGroup;
-  event: Event;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  myGroup !: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  event !: Event;
 }
 
 @Component({
@@ -1110,7 +1115,8 @@ export class FormGroupComp {
   template: `<input type="number" [formControl]="control">`
 })
 class FormControlNumberInput {
-  control: FormControl;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
 }
 
 @Component({
@@ -1269,7 +1275,8 @@ class NgModelSelectMultipleWithCustomCompareFnForm {
   `
 })
 class NgModelSelectMultipleForm {
-  selectedCities: any[];
+  // TODO(issue/24571): remove '!'.
+  selectedCities !: any[];
   cities: any[] = [];
 }
 
@@ -1278,7 +1285,8 @@ class NgModelSelectMultipleForm {
   template: `<input type="range" [formControl]="control">`
 })
 class FormControlRangeInput {
-  control: FormControl;
+  // TODO(issue/24571): remove '!'.
+  control !: FormControl;
 }
 
 @Component({selector: 'ng-model-range-form', template: '<input type="range" [(ngModel)]="val">'})
@@ -1299,7 +1307,8 @@ class NgModelRangeForm {
     <input type="radio" [formControl]="showRadio" value="no">`
 })
 export class FormControlRadioButtons {
-  form: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
   showRadio = new FormControl('yes');
 }
 
@@ -1316,8 +1325,10 @@ export class FormControlRadioButtons {
   `
 })
 class NgModelRadioForm {
-  food: string;
-  drink: string;
+  // TODO(issue/24571): remove '!'.
+  food !: string;
+  // TODO(issue/24571): remove '!'.
+  drink !: string;
 }
 
 @Directive({
@@ -1330,7 +1341,8 @@ class NgModelRadioForm {
 })
 class WrappedValue implements ControlValueAccessor {
   value: any;
-  onChange: Function;
+  // TODO(issue/24571): remove '!'.
+  onChange !: Function;
 
   writeValue(value: any) { this.value = `!${value}!`; }
 
@@ -1345,7 +1357,8 @@ class WrappedValue implements ControlValueAccessor {
 @Component({selector: 'my-input', template: ''})
 export class MyInput implements ControlValueAccessor {
   @Output('input') onInput = new EventEmitter();
-  value: string;
+  // TODO(issue/24571): remove '!'.
+  value !: string;
 
   constructor(cd: NgControl) { cd.valueAccessor = this; }
 
@@ -1366,7 +1379,8 @@ export class MyInput implements ControlValueAccessor {
     </div>`
 })
 export class MyInputForm {
-  form: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
 }
 
 @Component({
@@ -1377,7 +1391,8 @@ export class MyInputForm {
     </div>`
 })
 class WrappedValueForm {
-  form: FormGroup;
+  // TODO(issue/24571): remove '!'.
+  form !: FormGroup;
 }
 
 @Component({
@@ -1388,9 +1403,11 @@ class WrappedValueForm {
   providers: [{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: NgModelCustomComp}]
 })
 export class NgModelCustomComp implements ControlValueAccessor {
-  model: string;
+  // TODO(issue/24571): remove '!'.
+  model !: string;
   @Input('disabled') isDisabled: boolean = false;
-  changeFn: (value: any) => void;
+  // TODO(issue/24571): remove '!'.
+  changeFn !: (value: any) => void;
 
   writeValue(value: any) { this.model = value; }
 
@@ -1410,6 +1427,7 @@ export class NgModelCustomComp implements ControlValueAccessor {
   `
 })
 export class NgModelCustomWrapper {
-  name: string;
+  // TODO(issue/24571): remove '!'.
+  name !: string;
   isDisabled = false;
 }