當我在離子選擇元素上使用 formcontrolname 時，所選值不會從一開始就顯示出來。它僅在我單擊選擇元素或使用 setTimeout() 時出現：
html:
<form [formGroup]="formGroup">
<ion-row>
<ion-col>
<ion-select okText="{{ 'common.ok' | translate }}"
cancelText="{{ 'common.close' | translate }}"
interface="action-sheet"
formControlName="absenceTypeId">
<ion-select-option *ngFor="let absenceType of absenceTypes" value="{{absenceType.id}}">{{absenceType.name}}</ion-select-option>
</ion-select>
</ion-col>
</ion-row>
</form>
打字稿：
@Input() absenceTypeId: string;
formGroup = this.formBuilder.group({
id: [null],
absenceTypeId: [null, Validators.required],
beginDate: [null, Validators.required],
endDate: [null]
});
ngOnInit() {
this.formGroup.patchValue({
absenceTypeId: this.absenceTypeId
});
}
這是一個錯誤，還是應該在 ngOnInit() 之外的另一個事件中更改表單組？
uj5u.com熱心網友回復：
在 OnInit 中，您應該使用 FormBuilder 來初始化您的表單。
this.formGroup = this.formBuilder.group({ absenceTypeId: this. absenceTypeId });
將 formBuilder 注入到您的建構式中的位置。您可以保留當前的實作，但首先您應該初始化您的表單。在您的建構式中，您應該有類似前面示例的內容：
this.formGroup = this.formBuilder.group({ absenceTypeId: this. absenceTypeId });
然后你可以保留你的代碼從 OnInit。
編輯：
您可以查看此示例https://stackblitz.com/edit/ionic-angular-v5-gmwmrw?file=src/app/app.component.ts。
如您所見，如果您在修補表單時輸入的值與 ion-select 中的其余值不同，則不會顯示默認值。因此，請檢查您輸入的缺席型別 ID 是否是您的缺席型別中的一個值。另外，添加一個 compareWith 函式，因為您正在迭代物件。
uj5u.com熱心網友回復：
所以問題似乎是，patchValue 是在加載所有選擇項之前發生的。在普通的 Angular 中，這從來都不是問題，因為即使在定義選定值之后加載專案時，控制元件也會更新/重新呈現。對于 Ionic，我能夠通過等待專案來解決這個問題，然后才執行 patchValue：
absenceTypes$ = new ReplaySubject<AbsenceTypeModel[]>(1);
ngOnInit() {
this.absenceTypes$
.subscribe(() => {
if (this.absenceTypeId) {
this.formGroup.patchValue({
absenceTypeId: this.absenceTypeId
});
}
});
this.absenceTypeService.getAll()
.subscribe(absenceTypes => this.absenceTypes$.next(absenceTypes));
}
我不確定這是否是 ionic 的預期行為，但它肯定會使開發變得更加復雜。
編輯：您還應該使用 [value] 而不是 value 進行非字串系結。否則它會將字串與不相等的非字串進行比較：
<ion-select-option [value]="absenceType.id">
uj5u.com熱心網友回復：
在您的 HTML 檔案中
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<ion-select okText="{{ 'common.ok' | translate }}" cancelText="{{ 'common.close' | translate }}" interface="action-sheet" formControlName="absenceTypeId">
<ion-select-option *ngFor="let absenceType of absenceTypes" value="{{absenceType.id}}">{{absenceType.name}}</ion-select-option>
</ion-select>
</ion-col>
</ion-row>
</form>
在你的 Ts 檔案中
onSubmit(){
let absenceTypeId = this.formGroup.value.absenceTypeId;
console.log(absenceTypeId);
}
試試這個代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/433938.html