How to create components in Angular?

Question

Look at the structure of the project

The page estilo-cadastro.component.html is found that way as you can see below.

<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>

I’m trying to create a component with the code snippet below and I’m not getting.

<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>

This is the file 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 = [];
}

And this is the file 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));
    }
}

That’s the error message you’re giving:

Please, how do I resolve this? The error message is giving in this line of code:

<input pInputText type="text" name="nome" [(ngModel)]="estilo.nome"

Answer 1

This happens because your ChildComponent (app-layout-cadastro-estilo) is trying to access a property declared on ParentComponent (app-estilo-cadastro), that would be the form.

One of the methods of solving this would be passing the form as a variable to your ChildComponent, thus:

<app-layout-cadastro-estilo [form]="f" [estilo]="estilo"></app-layout-cadastro-estilo>

@Component({
    selector: 'app-layout-cadastro-estilo',
    templateUrl: './layout-cadastro-estilo.component.html',
    styleUrls: ['./layout-cadastro-estilo.component.css']
})

export class LayoutCadastroEstiloComponent {
    @Input() form: FormGroup;
    @Input() estilo = [];
}

And there in your Childcomponent template you define so: [disabled]="form.invalid".

---

Note: Actually your mistake is in this line:

<button pButton type="submit" label="Salvar" [disabled]="f.invalid"></button>

See the error message: Cannot read property 'invalid' of undefined