refactor(forms): ngForm element selector has been deprecated in favor of ng-form (#23721)

This has been deprecated to keep selector consistent with other core Angular selectors.  As element selectors are in kebab-case.

 Now deprecated:
 ```
 <ngForm #myForm="ngForm">
 ```

 After:
 ```
 <ng-form #myForm="ngForm">
 ```

You can also choose to supress this warnings by providing a config for `FormsModule` during import:

```ts
imports: [
 FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'never'});
]

Closes: #23678

PR Close #23721

packages/forms/src/directives/ng_form.ts

@@ -55,16 +55,31 @@ const resolvedPromise = Promise.resolve(null);
  * unnecessary because the `<form>` tags are inert. In that case, you would
  * refrain from using the `formGroup` directive.
  *
+ * Support for using `ngForm` element selector has been deprecated in Angular v6 and will be removed
+ * in Angular v9.
+ *
+ * This has been deprecated to keep selectors consistent with other core Angular selectors,
+ * as element selectors are typically written in kebab-case.
+ *
+ * Now deprecated:
+ * ```html
+ * <ngForm #myForm="ngForm">
+ * ```
+ *
+ * After:
+ * ```html
+ * <ng-form #myForm="ngForm">
+ * ```
+ *
  * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
  *
  * * **npm package**: `@angular/forms`
  *
  * * **NgModule**: `FormsModule`
  *
- *
  */
 @Directive({
-  selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
+  selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]',
   providers: [formDirectiveProvider],
   host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
   outputs: ['ngSubmit'],

packages/forms/src/directives/ng_form_selector_warning.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, Inject, InjectionToken, Optional} from '@angular/core';
+import {TemplateDrivenErrors} from './template_driven_errors';
+
+/**
+ * Token to provide to turn off the warning when using 'ngForm' deprecated selector.
+ */
+export const NG_FORM_SELECTOR_WARNING = new InjectionToken('NgFormSelectorWarning');
+
+/**
+ * This directive is solely used to display warnings when the deprecated `ngForm` selector is used.
+ *
+ * @deprecated in Angular v6 and will be removed in Angular v9.
+ *
+ */
+@Directive({selector: 'ngForm'})
+export class NgFormSelectorWarning {
+  /**
+   * Static property used to track whether the deprecation warning for this selector has been sent.
+   * Used to support warning config of "once".
+   *
+   * @internal
+   */
+  static _ngFormWarning = false;
+
+  constructor(@Optional() @Inject(NG_FORM_SELECTOR_WARNING) ngFormWarning: string|null) {
+    if (((!ngFormWarning || ngFormWarning === 'once') && !NgFormSelectorWarning._ngFormWarning) ||
+        ngFormWarning === 'always') {
+      TemplateDrivenErrors.ngFormWarning();
+      NgFormSelectorWarning._ngFormWarning = true;
+    }
+  }
+}

packages/forms/src/directives/template_driven_errors.ts

@@ -57,4 +57,21 @@ export class TemplateDrivenErrors {
 
       ${Examples.ngModelGroup}`);
   }
+
+  static ngFormWarning() {
+    console.warn(`
+    It looks like you're using 'ngForm'.
+
+    Support for using the 'ngForm' element selector has been deprecated in Angular v6 and will be removed
+    in Angular v9.
+
+    Use 'ng-form' instead.
+
+    Before:
+    <ngForm #myForm="ngForm">
+
+    After:
+    <ng-form #myForm="ngForm">
+    `);
+  }
 }