我正尝试用要编辑的模型中的数据填充表单输入字段。文本输入字段工作正常,但数字字段保持空白,直到我点击它们,有些直到我点击它们和所有以前的数字字段...是什么导致了这个问题?下面是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();
}
这个方法非常慢,我必须在页面加载后等待几秒钟才能更新值,并且不是所有的值都得到更新。有没有更好的办法?如果没有,我如何正确地更新数字字段,以便它们在页面加载后显示自己的预期值?
2条答案
按热度按时间pgky5nke1#
可以在声明表单组时初始化值
如果要更新表单组的值,可以直接在表单组上使用
setValue
或patchValue
。setValue
要求更新所有输入。因此,如果您有一个包含三个表单控件的from组,并且您只想更新两个控件,则必须使用`patchValue。例如:v8wbuo2f2#
这个类似的问题对我来说已经解决了,只要在上有一个 *ngIf,包含所有可能在开始时没有初始化的列表/方法。
例如,你的方法“GetTipovi()”可能返回一个在开始加载时还没有完成的列表,但是由于双向绑定,只要“GetTipovi()”有东西要返回,你的循环仍然会得到值。
将 *ngIf添加到从“GetTipovi()”返回的列表中可能会解决您的问题。