已设置表单控件数字值，但在触摸之前不显示

Question

我正试图用要编辑的模型中的数据填充表单输入字段。文本输入字段工作正常，但数字字段在我点击它们之前保持为空，有些直到我点击它们，以及以前的所有数字字段。。。是什么原因导致了这个问题？这是html:

<form [formGroup]="servis.editCarFrom" style="width: 320px;">
<div class="form">
<div class="form">
<div>
<label for="marka">Marka:</label>
<input  id="marka" formControlName="marka" class="form-control"  value="{{servis.editCarForm.get('marka').value}}">
</div>
</div>
<div class="form">
<div>
<label for="model">Model:</label>
<input  id="model" formControlName="model" class="form-control" value="{{servis.editCarForm.get('model').value}}">
</div>
</div>
<div class="form">
<div>
<label for="brojMesta">Broj mesta:</label>
<input type="number" id="brojMesta" formControlName="brojMesta" class="form-control" value="{{servis.editCarForm.get('brojMesta').value}}">
</div>
</div>
<div class="form">
<div>
<label for="godiste">Godiste:</label>
<input type="number" id="godiste" formControlName="godiste" class="form-control" value="{{servis.editCarForm.get('godiste').value}}">
</div>
</div>
<div class="form">
<div>
<label for="cena">Cena:</label>
<input type="number" id="cena" formControlName="cena" class="form-control" value="{{servis.editCarForm.get('cena').value}}">
</div>
</div>
<div class="form">
<div>
<label for="brzaRezervacija">Brza rezervacija:</label>
<input type="checkbox" id="brzaRezervacija" formControlName="brzaRezervacija" class="form-control" value="{{servis.editCarForm.get('brzaRezervacija').value}}">
</div>
</div>
<div>
<label for="tip">Tip vozila:</label>
<select id="tip" formControlName="tip" class="form-control">
<option selected value>{{servis.editCarForm.get('tipVozila').value}}</option>
<option *ngFor="let t of GetTipovi()">
{{t}}
</option>
</select>
</div>
</div>
<div style="display: inline;">
<button (click)="Save()">Sacuvaj</button>
<button style="float: right;" (click)="Nazad()">Nazad</button>
</div>
</form>

这里是我设置控制值的地方：

InitEditCarForm(kola: any) {
let naziv = kola.naziv.split('-');
let marka = naziv[0];
let model = naziv[1];
let tip = TipVozila[kola.tipVozila];
this.editCarForm.controls.marka.setValue(marka);
this.editCarForm.controls.model.setValue(model);
this.editCarForm.controls.godiste.setValue(kola.godiste);
this.editCarForm.controls.cena.setValue(kola.cena);
this.editCarForm.controls.brojMesta.setValue(kola.brojMesta);
this.editCarForm.controls.brzaRezervacija.setValue(kola.brzaRezervacija);
this.editCarForm.controls.tipVozila.setValue(kola.tipVozila);
this.editCarForm.markAllAsTouched();
}

这个方法非常慢，我必须在页面加载后等待几秒钟，然后更新值，而不是所有值都更新。有更好的方法吗？如果没有，我如何正确地更新数字字段，以便在页面加载后它们自己显示预期值？

Answer 1

您可以在声明表单组时初始化值

formGroup = new FormGroup({
firstInput: new FormControl(value1),
secondInput: new FormControl(value2)
});

如果要更新表单组的值，可以直接在表单组上使用setValue或patchValue。setValue要求您更新所有输入。因此，如果您有一个包含三个表单控件的from组，并且只想更新两个控件，则必须使用`patchValue。例如：

formGroup = new FormGroup({
control1: new FormControl('init value'),
control2: new FormControl(null),
control3: new FormControl(12) 
});
function updateAllValues() {
this.formGroup.setValue({
control1: 'new value',
control2: true,
control3: 42
);
}
function updateSomeValues() {
this.formGroup.setValue({
control1: 'new extra value',
control3: 42
);
}

Answer 2

这个类似的问题对我来说已经解决了，只需在上安装一个*ngIf，以及所有可能在开始时尚未初始化的包含列表/方法。

例如，您的方法"；GetTipovi(("；可能在开始加载时返回一个尚未完成的列表，但是由于双向绑定，您的循环仍然会在"；GetTipovi(("；有东西要归还。

将*ngIf添加到具有从"返回的列表的中；GetTipovi(("；可能会解决你的问题。