build(aio): change examples to CLI (#19248)

PR Close #19248

aio/content/examples/form-validation/src/app/app.component.ts

@@ -2,9 +2,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
-  template: `<hero-form-template></hero-form-template>
+  selector: 'app-root',
+  template: `<app-hero-form-template></app-hero-form-template>
              <hr>
-             <hero-form-reactive></hero-form-reactive>`
+             <app-hero-form-reactive></app-hero-form-reactive>`
 })
 export class AppComponent { }

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts

@@ -6,7 +6,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
-  selector: 'hero-form-reactive',
+  selector: 'app-hero-form-reactive',
   templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -14,7 +14,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
 
 // #docregion directive
 @Directive({
-  selector: '[forbiddenName]',
+  selector: '[appForbiddenName]',
   // #docregion directive-providers
   providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
   // #enddocregion directive-providers

aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts

@@ -4,7 +4,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'hero-form-template',
+  selector: 'app-hero-form-template',
   templateUrl: './hero-form-template.component.html'
 })
 export class HeroFormTemplateComponent {