I am working on an angular material form in my project.
The file I am working on is add-beer.component.html
<mat-form-field>
<input type="number" name="mSladu" matInput placeholder="Hmotnosť sladu" #beerMSLadu="ngModel" [(ngModel)]="beer.mSladu">
</mat-form-field>
<mat-form-field>
<input type="number" name="hRmutu" matInput placeholder="Hustota rmutu" #beerHRmutu="ngModel" [(ngModel)]="beer.hRmutu">
</mat-form-field>
<mat-form-field>
<input type="number" name="predOHlNalevu" matInput placeholder="Predpokladaný objem hl. nálevu" #beerPredOHlNalevu="ngModel" [(ngModel)]="beer.predOHlNalevu" [value]="beer.hRmutu * beer.mSladu">
</mat-form-field>
<mat-form-field>
<input type="number" name="predOPredku" matInput placeholder="Predpokladaný objem predku" #beerPredOPredku="ngModel" [(ngModel)]="beer.predOHlNalevu * 1.3">
</mat-form-field>
A function called onSubmit within the add-beer.component.ts file, which gets triggered when the form is submitted.
onSubmit({value, valid}: { value: Beer, valid: boolean }) {
if (!valid) {
// Show error
this.flashMessage.show('Prosím zadajte povinné údaje', {
cssClass: 'alert-warn', timeauto: 4000
});
} else {
// Add new client
this.beerService.newBeer(value);
// Show message
this.flashMessage.show('Údaje boli uspešne uložené', {
cssClass: 'alert-success', timeauto: 4000
});
// Redirect to dashboars
this.router.navigate(['/']);
}
}
Within the beer.service.ts
newBeer(beer: Beer) {
this.beersCollection.add(beer);
}
Question 1
In the input fields named mSladu and hRmutu, the values are multiplied and the result is saved as the Value of input. However, when I submit the form, only the mSladu and hRmutu values get saved in Firebase.
Question 2
When I try to multiply the value of the predOHlNalevu field to show it as the value of the predOPredku field, nothing happens and the input remains empty.
Thank you for any assistance provided.
Edit: In the add-beer.component.ts file, I have initialized an object:
beer: Beer = {
mSladu: null,
hRmutu: null,
predOHlNalevu: null,
predOPredku: null
};
The model Beer.ts contains data structure for Beer[] array.