angular 4中的反应式表单在单击按钮时提交复选框值的数组
angular 4中的反应式表单在单击按钮时提交复选框值的数组
提问于 2018-12-27 07:46:30
我正在用Angular 4开发一个应用程序。我正在使用反应式表单。我正在构建一个简单的提交表单，如下所示：
<form [formGroup]="newPostForm" novalidate>
<input formControlName="Title" type="text" class="form-control" id="txtTitle" placeholder="Enter title of post...">
<h4>Categories</h4>
<ul>
<li *ngFor="let cat of catsList">
<span style="margin-top: -2.5px;">
<input id="CheckBox" type="checkbox" formNameArray="Categories" [value]='cat.CategoryID' checked='false'></span> {{cat.CategoryName}}
</li>
</ul>
<input type="submit" name="btnSubmit" value="Save" id="btnSubmit" (click)="onSubmitedForm()" class="btn btn-primary">
</form>下面是新的-post.Component.ts文件：
export class NewPostComponent implements OnInit {
public catsList: any = [];
public newPostDTO: any = [];
newPostForm: FormGroup;
constructor(private _postsSvc: PostsService,
private _categoriesSvc: CategoriesService,
private _formGroup: FormBuilder) { }
ngOnInit() {
this.getAllCategories();
this.initProperties(); //init all props
this.createPostForm();
}
initProperties() {
this.newPostDTO = {
Title: null,
Content: null,
Categories: null
};
}
createPostForm() {
this.newPostForm = this._formGroup.group({
Title: [''],
Categories: new FormArray([])
});
}
onSubmitedForm() {
console.log(this.newPostForm.value.Categories);
this.newPostDTO = {
Title: this.newPostForm.value.Title,
Categories: this.newPostForm.value.Categories,
};
this._postsSvc.addPost(this.newPostDTO).subscribe(data => {
if (data.status === 201) {
}
});
}
getAllCategories() {
this._categoriesSvc.getCategories().subscribe(
data => this.catsList = data.body );
}}单击提交按钮时，我希望将选中类别的所有I作为数组获取。我如何才能做到这一点？我试过了，但单击SUBMIT按钮后，Categories数组的值为空。
感谢所有人！
回答 1
Stack Overflow用户
发布于 2018-12-27 12:27:33
反应式窗体控件源代码是类而不是模板，因此如果要创建动态复选框，则需要创建多个formControl
如果希望更改仅在提交后发生，则可以传递{updateOn:" submit "}以仅在提交后获取数据
catsList = [{cName:"cat1"},{cName:"cat2"},{cName:"cat3"}];
newPostForm: FormGroup;
constructor(private fb: FormBuilder) {
const control = this.catsList.map((d)=>new FormControl())
this.newPostForm = this.fb.group({
Title: [''],
Categories: new FormArray(control,{updateOn:"submit"})
})
}
get catControl() {
return this.newPostForm.get('Categories')['controls'];
}
onSubmitedForm() {
}FormArray是基于索引的，因此我们应该对单个formControl使用索引
<form [formGroup]="newPostForm" >
<input formControlName="Title" type="text" class="form-control" id="txtTitle" placeholder="Enter title of post...">
<h4>Categories</h4>
<ul>
<li *ngFor="let cat of catControl;let i =index">
<span style="margin-top: -2.5px;" formArrayName="Categories">
<input [formControlName]="i" id="CheckBox" type="checkbox" ></span> {{catsList[i].cName}}
</li>
</ul>
<input type="submit" name="btnSubmit" value="Save" id="btnSubmit" (click)="onSubmitedForm()" class="btn btn-primary">
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53938284
复制相关文章
相似问题
腾讯云开发者
