我创建了一个JHipster应用,现在我想对由JHipster生成的默认实体编辑表单中的表单输入进行更改。
我认为这将是一个很好的解决方案:https://stackoverflow.com/a/43999461/4397899
但是,由于默认的JHipster生成的组件没有每个字段的ViewChild成员,所以我不知道如何应用此解决方案。
到目前为止,我认为我理解的是输入绑定到testentity-update.component.ts文件中的TestEntity对象。我是否需要在输入绑定中添加第二个[(ngModel)]
指令到.ts文件的@ViewChild注释成员? (甚至有可能吗?)
(testentity-update.component.html)
<div class="row justify-content-center">
<div class="col-8">
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
<h2 id="jhi-testentity-heading" jhiTranslate="sampleApp.testentity.home.createOrEditLabel">Create or edit a Testentity</h2>
<div>
<jhi-alert-error></jhi-alert-error>
<div class="form-group" [hidden]="!testentity.id">
<label for="id" jhiTranslate="global.field.id">ID</label>
<input type="text" class="form-control" id="id" name="id"
[(ngModel)]="testentity.id" readonly />
</div>
<div class="form-group">
<label class="form-control-label" jhiTranslate="sampleApp.testentity.value" for="field_value">Value</label>
<input type="text" class="form-control" name="value" id="field_value"
[(ngModel)]="testentity.value" />
</div>
</div>
<div>
<button type="button" id="cancel-save" class="btn btn-secondary" (click)="previousState()">
<fa-icon [icon]="'ban'"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
</button>
<button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
<fa-icon [icon]="'save'"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
</button>
</div>
</form>
</div>
(testentity-update.component.ts)
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ITestentity } from 'app/shared/model/testentity.model';
import { TestentityService } from './testentity.service';
@Component({
selector: 'jhi-testentity-update',
templateUrl: './testentity-update.component.html'
})
export class TestentityUpdateComponent implements OnInit {
testentity: ITestentity;
isSaving: boolean;
constructor(protected testentityService: TestentityService, protected activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.isSaving = false;
this.activatedRoute.data.subscribe(({ testentity }) => {
this.testentity = testentity;
});
}
previousState() {
window.history.back();
}
save() {
this.isSaving = true;
if (this.testentity.id !== undefined) {
this.subscribeToSaveResponse(this.testentityService.update(this.testentity));
} else {
this.subscribeToSaveResponse(this.testentityService.create(this.testentity));
}
}
protected subscribeToSaveResponse(result: Observable<HttpResponse<ITestentity>>) {
result.subscribe((res: HttpResponse<ITestentity>) => this.onSaveSuccess(), (res: HttpErrorResponse) => this.onSaveError());
}
protected onSaveSuccess() {
this.isSaving = false;
this.previousState();
}
protected onSaveError() {
this.isSaving = false;
}
}