Question

我有一种棱角分明的材料形式。

附加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>

add-beer.component.ts 函数，在提交表单上触发

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(['/']);
    }
}

beer.service.ts

newBeer(beer: Beer) {
this.beersCollection.add(beer);

}

问题1

输入名称 mSladu 和 hRmutu mSladu和hRmut相乘，结果作为输入值输入，但是我发送表单但是在发送表单时，只有mSladu和hRmutu值保存在Firebase中。

问题2

当我想要 predOHlNalevu 的乘法值并显示为 predOPredku 的值时，所以没有任何事情发生且输入保持为空。

感谢您的帮助

修改在add-beer.component.ts中我定义了一个对象

beer: Beer = {
    mSladu: null,
    hRmutu: null,
    predOHlNalevu: null,
    predOPredku: null
};

Beer []来自模特Beer.ts

Answer 1

Beer.ts

export class Candidate {
    mSladu: number;
    hRmutu: number;
    predOHlNalevu: number;
    predOPredku: number;

    constructor() {}
}

...

onSubmit() {
    if (!valid) {
beer: Beer = new Beer()
beer.mSladu = 'getFormValue'; 
beer.hRmutu = 'getFormValue';
beer.predOHlNalevu = 'getFormValue';
beer.predOPredku = 'getFormValue';
...
this.beerService.newBeer(beer);
...
 }
}

如果您在表单中使用某种类型的 FormGroup ，则可以通过以下一行更改上面的'getFormValue'：

this.yourFormGrouName.get('mSladu').value,

输入值不会发送到firebase

1 个答案: