如何从html到ts文件获得以下格式的数据?我已经在下面提到了[Angular]的格式

Question

如何从html获取数据到ts文件。我想获得如下格式的数据，需要的格式:

{
feedbackId: 1,
applicantId:1,
positionId:1,
comments:'test',
description:'test1',
recommendation:1,
status:1,
resourceRating:[{skillId:1,ratingId:2},{skillId:2,ratingId:3},{skillId:3,ratingId:2},{skillId:4,ratingId:3
},{skillId:5,ratingId:2},{skillId:6,ratingId:3},{skillId:7,ratingId:2},{skillId:8,ratingId:3}
]
}

HTML代码

<form [formGroup]="feedbackForm" (ngSubmit)="submitData()">
<div>
<label class="form-control-label" for="">Rating Scale: </label>
<div *ngFor='let rating of ratings'>{{rating.rating}}<span>.
</span>{{rating.ratingName}}</div>
</div>
<table class="res-tbl">
<thead style="background-color: #f6f9fc;">
<tr>
<th class="table-head"></th>
</tr>
</thead>
<tbody>
<tr class="skill-tr" *ngFor='let skill of skills; let i = index;'>
<td class="skill-td">
<b>{{skill.skillName}}<span>:</span></b>{{skill.description}}
</td>
<td>
<mat-radio-group >
<span class="radio-span">0</span><mat-radio-button class="radio-btn"   value="0"></mat-radio-button>
<span class="radio-span">1</span><mat-radio-button  class="radio-btn"  value="1"></mat-radio-button>
<span class="radio-span">2</span><mat-radio-button  class="radio-btn"  value="2"></mat-radio-button>
<span class="radio-span">3</span><mat-radio-button  class="radio-btn"  value="3"></mat-radio-button>
<span class="radio-span">4</span><mat-radio-button  class="radio-btn"  value="4"></mat-radio-button>
</mat-radio-group>
</td>
</tr>
</tbody>
</table>
<button>Submit</button>
</form>

这是ts代码

export class FeedbackFormComponent implements OnInit {
ngOnInit(): void {
this.ratings = this.ratingService.getAllRatings();
console.log(this.ratings);
this.skills = this.skillService.getAllSkills();
this.feedbackForm = this.fb.group({
applicantId:[''],
positionId:[''],
comments:[''],
recommendation:[],
resourceRating: this.fb.array([
this.fb.group({
skillId:[''],
ratingId:['']
})])
});    
}
}

有人能帮我一下吗?我是第一次接触Frontend和Angular。这是我在设计和功能方面的第一份工作。

谢谢!

Answer 1

您应该能够在主FormGroupthis.feedbackForm上调用getRawValue()，这将获得您可以用于预期输出的对象中的所有表单数据。

检查:https://angular.io/api/forms/AbstractControl#getRawValue