Observem a estrutura do projeto
A pagina estilo-cadastro.component.html
se encontra dessa forma como podem ver abaixo.
<div class="container">
<form #f="ngForm" autocomplete="off" (ngSubmit)="salvar(f)">
<div class="ui-g">
<div class="ui-g-12">
<h1>Novo Estilo</h1>
</div>
<app-layout-cadastro-estilo [estilo]="estilo"></app-layout-cadastro-estilo>
</div>
</form>
</div>
Estou tentando criar um componente com o trecho de código abaixo e não estou conseguindo.
<app-layout-cadastro-estilo [estilo]="estilo"></app-layout-cadastro-estilo>
<div class="ui-g-12 ui-md-9 ui-fluid">
<label>Nome do Estilo </label>
<input pInputText type="text" name="nome" [(ngModel)]="estilo.nome" ngModel #nome="ngModel" required minlength="5">
<app-message [control]="nome" error="required" text="Informe o Estilo"></app-message>
<app-message [control]="nome" error="minlength" text="Mínimo de {{ nome.errors?.minlength?.requiredLength }} caracteres"></app-message>
</div>
<div class="ui-g-12">
<p-footer>
<button pButton type="submit" label="Salvar" [disabled]="f.invalid"></button>
<button pButton type="button" label="Novo" class="ui-button-info"></button>
<a href="javascript:;">Voltar para a pesquisa</a>
</p-footer>
</div>
Esse é o arquivo layout-cadastro-estilo.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-layout-cadastro-estilo',
templateUrl: './layout-cadastro-estilo.component.html',
styleUrls: ['./layout-cadastro-estilo.component.css']
})
export class LayoutCadastroEstiloComponent {
@Input() estilo = [];
}
E esse é o arquivo estilo-cadastro.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ToastyService } from 'ng2-toasty';
import { Estilo } from './../../core/model';
import { ErroHandlerService } from './../../core/erro-handler.service';
import { EstiloService } from './../estilo.service';
@Component({
selector: 'app-estilo-cadastro',
templateUrl: './estilo-cadastro.component.html',
styleUrls: ['./estilo-cadastro.component.css']
})
export class EstiloCadastroComponent implements OnInit {
private estilo = new Estilo();
constructor(
private estiloService: EstiloService,
private erroHandler: ErroHandlerService,
private toasty: ToastyService
) { }
ngOnInit() {}
salvar(form: FormControl) {
this.estiloService.adicionar(this.estilo).then(() => {
this.toasty.success('Cerveja adicionado com sucesso!');
form.reset();
this.estilo = new Estilo();
}).catch(erro => this.erroHandler.handle(erro));
}
}
Essa é a mensagem de erro que está dando:
Por favor, como faço para resolver isso? A mensagem de erro está dando nessa linha de código:
<input pInputText type="text" name="nome" [(ngModel)]="estilo.nome"