在Angular 8中，当使用[(ngModel)]在模板中绑定变量时，自动计算的值只有在编辑后才会显示为有效数字。这是因为Angular不会调用验证器来检查自动计算的值。为了解决这个问题，我们可以手动调用Angular的验证器来检查计算的值。

示例代码:

在组件中定义验证器：

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

form: FormGroup;

constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ amount: ['', Validators.required], total: [''] }); }

ngOnInit() { this.form.get('amount').valueChanges.subscribe(value => { this.calculateTotal(); }); }

calculateTotal() { const amount = this.form.get('amount').value; const total = amount * 10; // Perform the calculation here this.form.get('total').setValue(total); this.form.get('total').updateValueAndValidity(); }

}

在模板中绑定变量和验证器：

在样式表中添加CSS类来标记验证不通过的字段：

.invalid { border: 1px solid red; }

这样，当amount输入框的值改变时，calculateTotal()方法将会计算total的值，并手动调用验证器，使得total值能够被正确检验并显示为有效数字。