当我进入编辑表单时,我需要将值预填充到表单中。
创建表单工作正常,值提交正常,
.HTML:
<!-- customers-->
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input type="text"
placeholder="Customers"
i18n-placeholder="customerInput"
aria-label="customers"
matInput
required
[name]="'customerId'"
(focus)="getCustomers(searchedCustomer)"
[ngModel]="contractInterface.customerName"
(ngModelChange)="customerOnChange($event)"
[matAutocomplete]="autoCustomer">
<mat-autocomplete #autoCustomer="matAutocomplete" [displayWith]="customerCollectionDisplayFn">
<mat-option *ngIf="customerloading"><span [ngTemplateOutlet]="loading"></span></mat-option>
<ng-container *ngIf="!customerloading">
<mat-option *ngFor="let customer of customerList" [value]="customer">
{{ customer.name }}
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-form-field>
</div>
我使用[displayWith]="customerCollectionDisplayFn"
显示输入的值
TS:
customerCollectionDisplayFn(customer?) {
return customer?.name;
}
1. When you click the "Edit Form" Button you have to gather the persisted
information for the form inputs fields. this might be from localstorage or from
http request via angular service ([Angular Tutorial Http Server][1]) like in
section --> "app/config/config.service.ts (getConfig v.1)".
2. then create an empty "contractInterface" property in your component and
update it after you got the infos from localstorage or http request
like ...
contractInterface: any = {};
or ...
contractInterface: BlaInterface = new BlaInterface();
later...
loadMyFormValues() {
this.myFormService.myGetFormValuesFn()
.subscribe((contractInterface: any)
=> this.contractInterface = contractInterface);
}
[1]: https://angular.io/guide/http#requesting-data-from-a-server
PS:在变量名称中使用接口一词可能会令人困惑。 就个人而言,我更喜欢避免它。 如果适用,也在接口名称本身中。
所以我所做的只是更改了 ngModel[ngModel]="customer"
private getContractDetails(id: number) {
this.contractService.loadContractDetails(id)
.subscribe( (rez: Contract) => {
// add value to customer input
this.customer.name = rez.customerName; // <-- this
它站起来了..
---奖金---
对于选择输入,这有效
.HTML:
<mat-form-field>
<mat-label i18n="@@typeInput">Type</mat-label>
<mat-select
name="typeId"
[ngModel]="typesVal" // <--- this
(ngModelChange)="setContractType($event)"
#item="ngModel">
<mat-option *ngIf="isLoadingTypes"><span [ngTemplateOutlet]="loading"></span></mat-option>
<ng-container *ngIf="!isLoadingTypes">
<mat-option>None</mat-option>
<mat-option *ngFor="let item of contractTypeList" [value]="item">{{ item.name }}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
守则
this.typesVal = this.contractTypeList.find(x => x.id === rez.typeId);