Getting Values from Angluar Page

Question

I want to get Information from Input Field and post them as http. I found a way, but would be like to hear if there is a better one because it seems to be ugly to write a Method for each value. In my case there are just 3 Values but if you get more fields it will be very ugly to have so much Methods. I needed to write Methods with event as any, becouse otherwise event.target.value is not known.

Maybe there is a better approch after all.

Can you help me?

Person.component.html

<div>
    <input type="button" value="Laden..." (click)="loadPersons()"/>
    <div *ngFor="let person of persons">
        <span>{{person.name}}, {{person.vorname}} {{person.alter}}</span>
    </div>
    <div>
        Name: <input type="text" [value] = "newPerson.name" (input) = "onNameChange($event)"><br>
        Vorname: <input type="text" [value] = "newPerson.vorname" (input) = "onVornameChange($event)"><br>
        Alter: <input type="number" [value] = "newPerson.alter" (input) = "onAlterChange($event)"><br>
        <input type="button" value="Hinzufügen..." (click)="addPerson()"/>
    </div>
</div>

person.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Person } from '../models/person';
import { HttpService } from '../services/http-service';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  providers: [HttpService],
  styleUrls: ['./person.component.scss']
})
export class PersonComponent implements OnInit {

  public persons: Person[];
  public newPerson: Person;

  constructor(private httpService: HttpService) { 
   this.persons = [];
   this.newPerson = { name: '', vorname: '', alter: 0, id: 0 }; 
   
  }

  public onNameChange(event: any){
    this.newPerson.name = event.target.value
  }

  public onVornameChange(event: any){
    this.newPerson.vorname = event.target.value
  }

  public onAlterChange(event: any){
    this.newPerson.alter = event.target.value
  }

  private ClearInput() {
    this.newPerson = { name: '', vorname: '', alter: 0, id: 0 };
  }

  loadPersons(){
    this.httpService.getPerson().subscribe(
      result => {
        this.persons=result;
      }
    );
  }

  addPerson(){
    this.httpService.addPerson(this.newPerson).subscribe(
      result => {
        this.loadPersons();
        this.ClearInput();
      }
    );
  }


  ngOnInit(): void {
  }



}

Answer 1

Use two-way data binding in the template

<div>
  <input type="button" value="Laden..." (click)="loadPersons()" />
  <div *ngFor="let person of persons">
    <span>{{ person.name }}, {{ person.vorname }} {{ person.alter }}</span>
  </div>
  <div>
    Name: <input type="text" [(ngModel)]="newPerson.name" /><br />
    Vorname: <input type="text" [(ngModel)]="newPerson.vorname" /><br />
    Alter: <input type="number" [(ngModel)]="newPerson.alter" /><br />
    <input type="button" value="Hinzufügen..." (click)="addPerson()" />
  </div>
</div>

You dont need the 3 methods anymore.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Person } from '../models/person';
import { HttpService } from '../services/http-service';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  providers: [HttpService],
  styleUrls: ['./person.component.scss']
})
export class PersonComponent implements OnInit {

  public persons: Person[];
  public newPerson: Person;

  constructor(private httpService: HttpService) { 
   this.persons = [];
   this.newPerson = { name: '', vorname: '', alter: 0, id: 0 }; 
   
  }

  private ClearInput() {
    this.newPerson = { name: '', vorname: '', alter: 0, id: 0 };
  }

  loadPersons(){
    this.httpService.getPerson().subscribe(
      result => {
        this.persons=result;
      }
    );
  }

  addPerson(){
    this.httpService.addPerson(this.newPerson).subscribe(
      result => {
        this.loadPersons();
        this.ClearInput();
      }
    );
  }


  ngOnInit(): void {
  }

}