How to create components in the Angular?

Navigation
0

Look at the project structure

Thepageestilo-cadastro.component.htmlisinthisformasyoucanseebelow.

<divclass="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 it. 

<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));
    }
}

This is the error message you are giving:

Please,howdoIresolvethis?Theerrormessageisgivinginthislineofcode:

<inputpInputTexttype="text" name="nome" [(ngModel)]="estilo.nome"
    
asked by anonymous 22.01.2018 / 13:10

1 answer

1

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

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

<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 then in your ChildComponent template you define: [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

    
22.01.2018 / 13:56
What is the difference between querySelectorAll () and getElementsByClassName () Site content covering navigation bar