Freddy Daniel Alcarazo Ibáñez

Para los que hemos trabajo con el framework php Laravel sabemos que este es mejor que el sistema de validación de angular.

Hola chicos aqui les dejo el codigo del formulario, sin embargo no veo necesidad de separar los inputs del formulario si al final el que se envia es un solo formulario. No me quedo muy claro y además no comparte el codigo se hace mas tediosos de seguir https://pastebin.com/yzD3FJyp

import {MatCardModule} from  [@ [@ [@ [@ [@ [@'@angular](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)/material/card';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';

 [@
@NgModule](https://ed.team/u/
@NgModule)({
  declarations: [],
  imports: [
    MatCardModule, //se importo el modulo
    CommonModule,
    MatInputModule,
    MatFormFieldModule,
    MatIconModule,
    MatButtonModule,
    MatSlideToggleModule
  ],
  exports:[ //se agrego esto para usarlo en otros lados
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
    MatIconModule,
    MatButtonModule,
    
  ]
})
export class MaterialComponentsModule { }

Contenido de app.module.ts

import { NgModule } from  [@ [@'@angular](https://ed.team/u/'@angular)](https://ed.team/u/'@angular)/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CardComponent } from './card/card.component';
import { CardDetailComponent } from './card/card-detail/card-detail.component';
import { CalculatorModule } from './calculator/calculator.module';
[@
@NgModule](https://ed.team/u/
@NgModule)({
 declarations: [
   AppComponent,
   CardComponent,
   CardDetailComponent,
 ],
 imports: [

   BrowserModule,
   AppRoutingModule,
   CalculatorModule
 ],
 
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Sale un desmadre en la consola:

D:\Software\web\Angular\my-first-app(master)
λ ng s -o
Application bundle generation failed. [1.072 seconds]

X [ERROR] NG8001: 'app-calculator' is not a known element:
1. If 'app-calculator' is an Angular component, then verify that it is part of this module.
2. If 'app-calculator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the  [@'@NgModule.schemas](https://ed.team/u/'@NgModule.schemas)' of this component to suppress this message. [plugin angular-compiler]

   src/app/app.component.html:15:0:
     15 │ <app-calculator [title] = "message" (emitter)="getSumNumberResult(...
        ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 Error occurs in the template of component AppComponent.

   src/app/app.component.ts:5:15:
     5 │   templateUrl: './app.component.html',
       ╵                ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG5: Argument of type 'Event' is not assignable to parameter of type 'number'. [plugin angular-compiler]

   src/app/app.component.html:15:66:
     15 │ ..."message" (emitter)="getSumNumberResult($event)"></app-calculator>
        ╵                                            ~~~~~~

 Error occurs in the template of component AppComponent.

   src/app/app.component.ts:5:15:
     5 │   templateUrl: './app.component.html',
       ╵                ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. [plugin angular-compiler]

   src/app/card/card.component.html:3:19:
     3 │ <input type="text" [(ngModel)]="cardData.title"
       ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 Error occurs in the template of component CardComponent.

   src/app/card/card.component.ts:5:15:
     5 │   templateUrl: './card.component.html',
       ╵                ~~~~~~~~~~~~~~~~~~~~~~~


Watch mode enabled. Watching for file changes...

A pesar de haber creado los 2 componentes card y card2 no puedo ver el contenido de ninguno de ellos en la web, solo se ve el contenido del componente raiz. Para termina el ejemplo tuve que editar el html del componente raiz.