角度2.0の簡単なフォームを試してみましょう

Question

簡単なAngularJs 2の例のサブミットボットンで機能を作ろうとしています。しかし、私はそれを行う方法を見つけることができません。

これは

<h1> 
    {{title}} 
</h1> 

<h2>Contactos</h2> 

<app-lista-contactos [listaContactos]="contactos" (seleccion)="onSelect($event)"> 
</app-lista-contactos> 

<h2>Detalles</h2> 
<app-detalle-contacto [(contacto)]="contactoSeleccionado" (reset)="limpiar()" (guardar)="onSubmit()"> 
</app-detalle-contacto> 

app.component.ts

import { Component } from '@angular/core'; 
import { Persona } from './Persona'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Agenda'; 
    contactos: Persona[] = [ 
    {name: 'Pedro', email: 'pedro@gmail.com'}, 
    {name: 'Maria', email: 'maria@gmail.com'}, 
    {name: 'Juan', email: 'juan@gmail.com'}]; 

    contactoSeleccionado: Persona = new Persona(); 
    nuevoContacto = true; 

    onSelect(contacto: Persona): void { 
     this.contactoSeleccionado = contacto; 
     this.nuevoContacto = false; 
    } 

    onSubmit(): void { 
     if (this.nuevoContacto) { 
     this.contactos.push(this.contactoSeleccionado); 
     this.limpiar(); 
     }else { 
     console.log('Contacto actualizado'); 
     console.log(this.contactoSeleccionado); 
     } 
    } 

    limpiar(): void { 
     this.contactoSeleccionado = new Persona(); 
     this.nuevoContacto = true; 
    } 

} 

persona.ts

export class Persona { 
    name: string; 
    email: string; 
} 

detalle-contacto.component.html

私app.component.htmlです

<form (ngSubmit)="onSubmit()" #formulario="ngForm"> 
    <label id="nameID">Nombre</label> 
    <input [(ngModel)]="contacto.name" name="name" id="nameID" required> 
    <label id="emailID">Email</label> 
    <input [(ngModel)]="contacto.email" name="email" id="emailID" required> 
    <button type="button" (click)="onSubmit()" [disabled]="!formulario.form.valid">Guardar</button> 
    <button type="button" (click)="limpiar()">Reset</button> 
</form> 

とdetalle-contacto.component.ts私は100％の結合概念を理解しないので、多くのミスがなければならない知っている

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; 
import { Persona } from '../persona'; 

@Component({ 
    selector: 'app-detalle-contacto', 
    templateUrl: './detalle-contacto.component.html', 
    styleUrls: ['./detalle-contacto.component.css'] 
}) 
export class DetalleContactoComponent implements OnInit { 

    @Input() 
    contacto: Persona = new Persona(); 

    @Output() 
    reset = new EventEmitter<void>(); 
    guardar = new EventEmitter<Persona>(); 

    constructor() { } 

    ngOnInit() { 
    } 

    limpiar(): void { 
    this.reset.emit(); 
    } 

    onSubmit(): void { 
    this.guardar.emit(); 
    } 

} 

。また、私は本当にどのようにAngularで送信機能を実装していません。

私は何か助けや助言を受けることがうれしいです。

ありがとうございます！

Answer 1

Type="Submit"の送信ボタンを作成し、OnSubmit()をコンポーネントに追加すると、これ以上の設定は行われません。

<button type="submit" label="Submit"></button> 

コンポーネントで：HTMLで

：私はこのようにそれをやった

onSubmit() { 
    //whatever you want to do codewise here. 
}