加载数据后设置反应形式(异步)-Angular 5 [英] Set reactive form after data loaded (async) - Angular 5
问题描述
从API加载值后，我试图更新表单值.我尝试使用*ngIf技术，但是即使设置了表单也看不到该表单.
I am trying to update the form values after loading values from an API. I tried using the *ngIf technique but the form is not visible even when the form is set.
我无法共享整个项目，但这是组件模板和控制器
I am not able to share the full project, but here is the component template and controller
模板
<div class="page-title">
<h3> Edit news </h3>
</div>
<div class="partner-add-form">
<ng-container *ngIf='newsForm'>
<form action="" [formGroup]='newsForm' (ngSubmit)="onSubmit()">
<div class="row ">
<div class="input-field col s12 tooltip">
<input formControlName='title' [id]="'title'" [type]="'text'">
<label [for]="'title'">Title</label>
<validator-errors [control]='newsForm.get("title")'></validator-errors>
</div>
<div class="input-field col s12 tooltip">
<textarea class="materialize-textarea" formControlName='content' [id]="'content'"></textarea>
<label [for]="'content'">Content</label>
<validator-errors [control]='newsForm.get("content")'></validator-errors>
</div>
<div class="input-field col s12 margin-reset">
<mat-form-field class="full-width">
<mat-select [formControl]='newsForm.controls["partner_id"]'>
<mat-option disabled selected>Categories</mat-option>
<mat-option *ngFor="let partner of partners.data" [value]="partner.id">
{{ partner.name }} </mat-option>
</mat-select>
</mat-form-field>
<validator-errors [control]='newsForm.controls["partner_id"]'></validator-errors>
</div>
<div class="file-field col s12 input-field">
<div class="btn">
<span>File</span>
<input (change)="fileChangeListener($event)" type="file"> </div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files"> </div>
</div>
<div class="col s12">
<div class="flex flex-middle flex-center crop-area">
<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
<i class="material-icons">arrow_forward</i>
<div class="result rounded z-depth-1">
<img [src]="data.image " *ngIf="data.image " [width]="cropperSettings.croppedWidth"
[height]="cropperSettings.croppedHeight"> </div>
</div>
</div>
<div class="col s12 form-bottom">
<div class="left">
<button type="button" onclick='window.history.back()' class='btn btn-large waves-effect waves-light '>
<i class="material-icons">keyboard_arrow_left</i>
<span>Back</span>
</button>
</div>
<div class="right">
<button [ngClass]="{'disabled':(newsForm['invalid']) || isSubmitting || !data.image }" type="submit" class='btn btn-large waves-effect waves-light '>
Submit </button>
</div>
</div>
</div>
</form>
</ng-container>
</div>
控制器
partners;
news = {};
newsForm: FormGroup;
ngOnInit() {
setTimeout(() => {
this._dashboardService.routeChangeStarted();
}, 0);
this._activatedRoute.params.subscribe(params => {
this.news["id"] = params["id"];
this.getPartners().then(data => {
this.getNews().then(data=>{
this.setForm();
})
});
});
}
setForm() {
this.newsForm = this._formBuilder.group({
title: [this.news['title'], [Validators.required]],
content: [this.news['content'], [Validators.required]],
partner_id: [this.news['partner']['id'], [Validators.required]]
});
console.log(new Boolean(this.newsForm));
}
getPartners() {
return Promise((res, rej) => {
setTimeout(() => {
this._dashboardService.progressStarted();
this._dashboardService.routeChangeStarted();
}, 0);
this._partnerService.getPartners().subscribe(
partners => {
if (partners.status == 200) {
this.partners = partners;
res(partners.data);
} else {
this._errorActions.errorHandler(partners.status);
}
setTimeout(() => {
this._dashboardService.progressFinished();
this._dashboardService.routeChangeFinished();
}, 0);
},
error => {
this._notificationService.warning("Ups, something went wrong");
}
);
});
}
getNews() {
setTimeout(() => {
this._dashboardService.routeChangeStarted();
this._dashboardService.progressStarted();
}, 0);
return Promise((res, rej) => {
this._newsService.getNews(this.news["id"]).subscribe(
data => {
if (data["status"] == 200) {
Object.assign(this.news, data["data"]);
res(this.news);
} else {
this._errorActions.errorHandler(data["status"]);
}
setTimeout(() => {
this._dashboardService.progressFinished();
this._dashboardService.routeChangeFinished();
}, 0);
},
error => {
this._notificationService.error("Ups, something went wrong");
}
);
});
}
出什么问题了?设置表单后，它甚至不显示表单本身.从API加载数据后，还有另一种设置表单值的方法吗?
What is the problem? It doesn't even show the form itself after setting the form. Is there another way of setting the form values after loading the data from an API?
推荐答案
您可以创建一个单独的函数来用数据填充表单.您可以从API获取数据后调用此函数.
You can create a separate function to fill your form with data. You can call this function after getting data from an API.
变种1:setValue
Variant 1: setValue
正式的角度文档: setValue
使用setValue，您可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值.
With setValue, you assign every form control value at once by passing in a data object whose properties exactly match the form model behind the FormGroup.
示例:
updateValues(dataObject: any) {
this.heroForm.setValue({
name: this.hero.name,
address: this.hero.addresses[0] || new Address()
});
}
变体2:patchValue
Variant 2: patchValue
正式的角度文档: patchValue
使用patchValue，您可以通过仅为感兴趣的控件提供键/值对的对象来将值分配给FormGroup中的特定控件.
With patchValue, you can assign values to specific controls in a FormGroup by supplying an object of key/value pairs for just the controls of interest.
示例:
updateValues(dataObject: any) {
this.heroForm.patchValue({
name: this.hero.name
});
}
这篇关于加载数据后设置反应形式(异步)-Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
