'[(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);
  }

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

错误类型错误：无法读取未定义的属性“电子邮件” 在 Object.eval [as updateDirectives] (NewUserComponent.html:13)

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

谢谢

Answer 1

ngModel 绑定应该引用组件类的newUser 属性：

public newUser : NewUserRegisterModelDTO;

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

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

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

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

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

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

Answer 2

为 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 3

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

例如

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