表单嵌套的 Json Html 和 Angular答案

【问题标题】：Form nested nested Json Html and Angular表单嵌套的 Json Html 和 Angular
【发布时间】：2021-02-22 13:27:14
【问题描述】：

当我想将数据从 html 表单输入到嵌套的 JSON 对象时遇到问题。示例 JSON：

{
    "id": 6,
    "firstName": "Joanna",
    "lastName": "Walec",
    "salary": 5000.0,
    "department": "Analytics",
    "vacation": false,
    "enabled": true,
    "address": {
        "id": 6,
        "zipCode": 57532,
        "street": "Angular",
        "number": 2,
        "city": "New York",
        "country": "USA"
    }
}

ID 是自动递增的，并且关系是一对一的。该请求适用于后端。这是您输入所需数据的 HTML 表单：

<form #addForm="ngForm" (ngSubmit)="addEmployee(addForm)">
                      <div class="form-group">
                          <label for="firstName">First Name:</label>
                          <input type="text" ngModel name="firstName" class="form-control" id="firstName" placeholder="first name" required>
                      </div>
                      <div class="form-group">
                          <label for="lastName">Last Name:</label>
                          <input type="text" ngModel name="lastName" class="form-control" id="lastName" placeholder="last name" required>
                      </div>
                      <div class="form-group">
                          <label for="department">Department</label>
                          <input type="text" ngModel name="department" class="form-control" id="department" placeholder="department" required>
                      </div>
                      <div class="form-group">
                          <label for="salary">Salary</label>
                          <input type="number" ngModel name="address.salary" class="form-control" id="salary" placeholder="salary" min="0" required>
                      </div>
                      <div class="form-group">
                          <label for="zipCode">Zip code</label>
                          <input type="number" ngModel name="zipCode" class="form-control" id="zipCode" placeholder="zip code" min="10000" max="99999" required>
                      </div>
                      <div class="form-group">
                          <label for="street">Street</label>
                          <input type="text" ngModel name="street" class="form-control" id="street" placeholder="street" required>
                      </div>
                      <div class="form-group">
                          <label for="number">Number</label>
                          <input type="number" ngModel name="number" class="form-control" id="number" placeholder="number" min="1" required>
                      </div>
                      <div class="form-group">
                          <label for="city">City</label>
                          <input type="text" ngModel name="city" class="form-control" id="city" placeholder="city" required>
                      </div>
                      <div class="form-group">
                          <label for="country">Country</label>
                          <input type="text" ngModel name="country" class="form-control" id="country" placeholder="country" required>
                      </div>
                      <div class="modal-footer">
                          <button type="button" id="add-employee-form" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          <button [disabled]="addForm.invalid" type="submit" class="btn btn-primary">Save changes</button>
                      </div>
                  </form>

还有我的角度函数 addEmployee(addForm: NgForm)

 public addEmployee(addForm: NgForm): void{
    this.employeeService.addEmployee(addForm.value).subscribe(
      (response : Employee) =>{
        console.log(response);
        addForm.reset();
      }
    );
  }

enter image description here

谁能帮帮我？

【问题讨论】：

你的问题不清楚。你能说说你真正的要求是什么吗？
没错，你想要什么？
分享你是如何构造你发送给你后端 api 的对象
分享你是如何构造你发送给你后端 api 的对象
分享你是如何构造你发送给你后端 api 的对象

标签： html json angular nested angular-cli

【解决方案1】：

而不是使用

<div class="form-group">
 <label for="salary">Salary</label>
  <input type="number" ngModel name="address.salary" class="form-control" id="salary" placeholder="salary" min="0" required>
</div>

，请使用以下代码：

  <div class="form-group" ngModelGroup="address">
     <label for="salary">Salary</label>
     <input type="number" ngModel name="salary" class="form-control" id="salary" placeholder="salary" min="0" required>
  </div>

【讨论】：