表单嵌套嵌套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();
}
);
}

输入图片描述

有人能帮我吗?

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>