如何以反应形式从嵌套组中获取价值？

Question

我想以反应形式获取嵌套组中的用户值。我没有成功。我正在使用 JHipster 6.2.0.

开始初始化editForm。

初始化时调用 updateForm。

方法 createFromForm() 是在保存时调用的方法。

表单初始化正常，前面user的值正确。但是，保存后，用户值为空，未创建对象。

我认为 createFromForm() 方法不好，因为我不创建用户。但是，我找不到正确创建它的语法。

  editForm = this.fb.group({
id: [null],
activated: [],
user: this.fb.group({
  login: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50), Validators.pattern('^[_.@A-Za-z0-9-]*')]],
  firstName: ['', [Validators.maxLength(50)]],
  lastName: ['', [Validators.maxLength(50)]],
  email: ['', [Validators.minLength(5), Validators.maxLength(254), Validators.email]],
  activated: [true],
})
  });


 updateForm(professional: IProfessional) {
this.editForm.patchValue({
  id: professional.id,
  activated: professional.activated,
  user: {
    login : professional.user.login,
    firstName: professional.user.firstName,
    lastName: professional.user.lastName,
    email: professional.user.email,
    activated: professional.user.activated
  }
});
  }

 private createFromForm(): IProfessional {
return {
  ...new Professional(),
  id: this.editForm.get(['id']).value,
  activated: this.editForm.get(['activated']).value,
  companyId: this.editForm.get(['companyId']).value,
  ...new User(),
    login : this.editForm.get(['user.login']).value,
    firstName : this.editForm.get(['user.firstName']).value,
    lastName : this.editForm.get(['user.lastName']).value,
    email : this.editForm.get(['user.email']).value,
    activated : this.editForm.get(['user.activated']).value
  }
};

}

注意，专业模特ts是：

import {IUser} from "../../core/user/user.model";
export interface IProfessional {
  id?: number;
  activated?: boolean;
  user?: IUser;
}

export class Professional implements IProfessional {
  constructor(
    public id?: number,
    public activated?: boolean,
    public user?: IUser
  ) {
    this.activated = this.activated || false;
  }
}

模板表单：

<form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
        <h2 id="jhi-professional-heading" jhiTranslate="ormaxwebApp.professional.home.createOrEditLabel">Create or edit a Professional</h2>
        <div>
            <jhi-alert-error></jhi-alert-error>
            <div class="form-group" [hidden]="!editForm.get('id').value">
                <label for="id" jhiTranslate="global.field.id">ID</label>
                <input type="text" class="form-control" id="id" name="id" formControlName="id"
                    readonly />
            </div>
            <div class="form-group">
                <label class="form-control-label" jhiTranslate="ormaxwebApp.professional.activated" for="field_activated">Activated</label>
                <input type="checkbox" class="form-control" name="activated" id="field_activated"
                       formControlName="activated"/>
            </div>
            <div formGroupName="user">
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="userManagement.login">Login</label>
                    <input type="text" class="form-control" name="login"
                           formControlName="login">
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="userManagement.firstName">First Name</label>
                    <input type="text" class="form-control" name="firstName"
                           formControlName="firstName">
                </div>
                <div class="form-group">
                    <label jhiTranslate="userManagement.lastName">Last Name</label>
                    <input type="text" class="form-control" name="lastName"
                           formControlName="lastName">
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="userManagement.email">Email</label>
                    <input type="email" class="form-control" name="email" formControlName="email">
                </div>
                <div class="form-check">
                    <label class="form-check-label" for="activated">
                        <input class="form-check-input" [disabled]="id === null" type="checkbox" id="activated" name="activated"  formControlName="activated">
                        <span jhiTranslate="userManagement.activated">Activated</span>
                    </label>
                </div>
            </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.invalid || isSaving" class="btn btn-primary">
                <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
            </button>
        </div>
    </form>

尝试不带括号 无效

 private createFromForm(): IProfessional {
return {
  ...new Professional(),
  id: this.editForm.get('id').value,
  activated: this.editForm.get('activated').value,
  companyId: this.editForm.get('companyId').value,
  ...new User(),
    login : this.editForm.get('user.login').value,
    firstName : this.editForm.get('user.firstName').value,
    lastName : this.editForm.get('user.lastName').value,
    email : this.editForm.get('user.email').value,
    activated : this.editForm.get('user.activated').value
  }
};

我可能遗漏了什么，但我不明白。

你能帮帮我吗？

谢谢，

曼努埃拉

Answer 1

对于 createFromForm() 方法，您可以简单地使用 this.editForm.value 而不是尝试从头开始构建模型。

如果您想手动构建模型，您需要使用点标记字符串访问嵌套组

this.editForm.get('user.login').value

或字符串数组

this.editForm.get(['user', 'login']).value

如何以反应形式从嵌套组中获取价值？

How to get value from nested group in reactive form?

jhipster

angular