'[(ngModel)]' 用于另一个对象内部的对象形式字段

Question

我正在尝试做一些我不确定是否可行的事情。对于 Angular 表格，我有这样的反对意见：

export class NewUserRegisterModelDTO{
    userData:UserDetailModelDTO;
    roles:RoleModelDTO[];
    ownerData:OwnerDetailDTO;
}

export class UserDetailModelDTO {
    email:string;
    username:string;
    password:string;
    repeatPassword: string;
}

在我的 HTML 表单中，我有类似的东西：

<form class="form" #newUser="ngForm" action="" method="post">

    <h2 class="text-info">New User</h2>
    <hr>

    <div class="mr-10 ml-10">
        <h4 class="text-info mt-3">Login Info</h4>
        <hr>
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="email" class="text-info">Email</label><br>
                    <input type="text" name="email" id="email" class="form-control" placeHolder="email" [ngClass]="{'formInputError': ((email.errors?.minlength || email.errors?.required)) && email.touched}" [(ngModel)]="newUser.userData.email" required #email="ngModel">
                    <div *ngIf="email.touched && email.errors?.required" class="form-control-feedback mt-2 ml-2">Email required</div>
                </div>
            </div>

它不是完整的 HTML 因为它太大了。但如您所见，关键是这个标签：[(ngModel)]="newUser.userData.email"

在我的 TS 文件中，我有以下内容：

export class NewUserComponent {

  public newUser : NewUserRegisterModelDTO;
  loadingUsernameCheck: boolean = false;
  usernameExist : boolean;

  constructor(private router: Router, private authService : AuthService, private userService: UserService) { 
    this.newUser = new NewUserRegisterModelDTO();
    this.newUser.userData = new UserDetailModelDTO();
    this.newUser.ownerData = new OwnerDetailDTO();
    console.log(this.newUser);
  }

当我加载页面时出现以下错误:

ERROR TypeError: Cannot read property 'email' of undefined at Object.eval [as updateDirectives] (NewUserComponent.html:13)

可以这样声明一个 [(ngModel)] 吗？还是我必须创建一个包含所有独立字段的对象，然后构造 NewUserRegisterModelDTO？

谢谢

Answer 1

为 NewUserRegisterModelDTO 编写构造函数：

export class NewUserRegisterModelDTO{
    userData:UserDetailModelDTO;
    roles:RoleModelDTO[];
    ownerData:OwnerDetailDTO;
    constructor(){
    this.userData = new UserDetailModelDTO();
    this.roles = [];
    this.ownerData = new OwnerDetailDTO();
    }
}

然后在 ts 文件中使用它：

  public newUser : NewUserRegisterModelDTO = new NewUserRegisterModelDTO ();

您还必须为 UserDetailModelDTO 和 OwnerDetailDTO 编写构造函数

Answer 2

你应该为你的模型创建构造函数。

例如

export class NewUserRegisterModelDTO{
    userData:UserDetailModelDTO;
    roles:RoleModelDTO[];
    ownerData:OwnerDetailDTO;
    constructor(){
       this.userData =new UserDetailModelDTO();
    }
}

export class UserDetailModelDTO {
    email:string;
    username:string;
    password:string;
    repeatPassword: string;
    constructor(){
      this.email = null;
    }
}

请检查example

Answer 3

ngModel 绑定应该引用组件 class:

的 newUser 属性

public newUser : NewUserRegisterModelDTO;

[(ngModel)]="newUser.userData.email"

但您还在模板中定义了 newUser template reference variable:

<form #newUser="ngForm" ... >

和 ngModel 使用该变量而不是 class 属性。由于 ngForm 没有 userData 属性，因此尝试访问 newUser.userData.email 会导致运行时错误。

重命名模板引用变量（并调整实际引用它的代码）并且 ngModel 绑定应该可以正常工作：

<form #newUserForm="ngForm" ... >

'[(ngModel)]' 用于另一个对象内部的对象形式字段

'[(ngModel)]' for field of object form inside another object

forms

templates

structure

object

angular