Witam,
muszę dodać trzy inputy (imię, nazwisko i wiek który ma mieć wczesniej ustaloną wartość)przy użyciu ngModel, wydaje mi się ze dobrze to zrobiłem.
Teraz muszę stworzyc button, po kliknięciu którego wyświetle wszystkie dane poniżej buttona jako listę i drugi button, który wyczyści pola inputa.
Zrobiłem takie coś ale średnio to chyba działa i wygląda, głownie dlatego ze wiek jest od początku widoczny pod buttonem bez klikania na niego.
Dzięki za wszystkie rady
component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-lab3cw2',
templateUrl: './lab3cw2.component.html',
styleUrls: ['./lab3cw2.component.scss']
})
export class Lab3cw2Component implements OnInit {
imie = '';
nazwisko = '';
wiek = 22;
value = '';
value1 = '';
value2;
onEnter(value?: string, value1?: string, value2?: number) { this.value = value; this.value1 = value1; this.value2 = value2 }
constructor() { }
ngOnInit(): void {
}
}
component.html:
<h3>Użycie ngModel</h3>
<p>Imię ucznia to: {{ imie }}</p>
<br>
<p>Nazwisko ucznia to: {{ nazwisko }}</p>
<br>
<p>Wiek ucznia to: {{ wiek }}</p>
<label for="student">imię: </label>
<br>
<label for="student">nazwisko: </label>
<br>
<input [(ngModel)]="imie"> {{ imie }}
<br>
<input [(ngModel)]="nazwisko"> {{ nazwisko }}
<br>
<input [(ngModel)]="wiek"> {{ wiek }}
<br>
<button type="button" (click)="onEnter(imie, nazwisko, wiek)"> Wyświetl </button>
<p>{{value}} {{value1}} {{value2}}</p>