表格嵌套嵌套 Json Html 和 Angular

Question

当我想将数据从 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>

还有我的 angular 函数 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

有人可以帮我吗？

Answer 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>

表格嵌套嵌套 Json Html 和 Angular

Form nested nested Json Html and Angular

html

json

angular

nested

angular-cli