JHipster生成的输入字段上的反跳keyUp侦听器

时间:2018-12-22 17:24:48

标签: angular jhipster

我创建了一个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>&nbsp;<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>&nbsp;<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;
    }
}

0 个答案:

没有答案