如何从Angular 2中的表单创建嵌套JSON

时间:2017-09-12 14:46:06

标签: json angular

我正在尝试创建一个嵌套的JSON,从表单中获取值。我有2个接口

export Interface User{
username:string;
name:string;
passwordField:Password;
}

export Interface Password{
password:string;
secretQuestion:string;
}
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <div class="form-group">
  <label> <B>FORM TITLE</B></label>
  <hr>
    <label for="USER NAME">USER NAME:</label>
    <input type="text" required [(ngModel)]="user.username" class="form-control" id="username" name="username">
  </div>
<label for="NAME"> NAME:</label>
    <input type="text" required [(ngModel)]="user.name" class="form-control" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="PASSWORD">PASSWORD:</label>
    <input type="password" required [(ngModel)]="User.passwordField.password" class="form-control" id="password" name="password">
  </div>
<div class="form-group">
    <label for="SECRET QUESTION">SECRET QUESTION:</label>
    <input type="text" required [(ngModel)]="User.passwordField.secretQuestion" class="form-control" id="secretQuestion" name="secretQuestion">
  </div>
  <button type="submit"[disabled]="!myForm.valid" class="btn btn-default">Submit</button>
</form> 
onSubmit(user:User){
 alert(JSON.stringify(user))
 }

但是在警报中我得到{},其中传递值形成为

<label for="NAME"> NAME:</label>
    <input type="text" required [(ngModel)]="name" class="form-control" id="name" name="name">

制作一个简单的JSON。我们只能将表单obj转换为类的obj而不是类型接口吗?

0 个答案:

没有答案