typescript 已设置FormControl编号值,但在触摸之前不会显示

ttygqcqt  于 2023-05-30  发布在  TypeScript
关注(0)|答案(2)|浏览(126)

我正尝试用要编辑的模型中的数据填充表单输入字段。文本输入字段工作正常,但数字字段保持空白,直到我点击它们,有些直到我点击它们和所有以前的数字字段...是什么导致了这个问题?下面是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();
  }

这个方法非常慢,我必须在页面加载后等待几秒钟才能更新值,并且不是所有的值都得到更新。有没有更好的办法?如果没有,我如何正确地更新数字字段,以便它们在页面加载后显示自己的预期值?

pgky5nke

pgky5nke1#

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

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

如果要更新表单组的值,可以直接在表单组上使用setValuepatchValuesetValue要求更新所有输入。因此,如果您有一个包含三个表单控件的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
  );
}
v8wbuo2f

v8wbuo2f2#

这个类似的问题对我来说已经解决了,只要在上有一个 *ngIf,包含所有可能在开始时没有初始化的列表/方法。
例如,你的方法“GetTipovi()”可能返回一个在开始加载时还没有完成的列表,但是由于双向绑定,只要“GetTipovi()”有东西要返回,你的循环仍然会得到值。
将 *ngIf添加到从“GetTipovi()”返回的列表中可能会解决您的问题。

相关问题