角反应形式
[英] Angular Reactive Form
本文介绍了角反应形式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Angular 5 的新手.我目前正在研究 Angular Reactive 表单.我有一个以下 JSON 结构，我需要在从 FORM 获取值后将其回发到 REST API.
JSON 结构:
<代码> {"empDesg": "高级开发人员",empID":123，"empName": "山姆","empSkills": ["爪哇",开发者"]} 我设法将 empID、empName 和 empDesg 映射到表单控件；它们都将成为输入文本元素.我想使用 formcontrols 或 formarray 将 empSkills 映射到复选框(但不确定使用哪个)- 只有我被卡住了.
我的 HTML 和组件类:
addEmp.component.html
<div class="form-group row"><label for="empName" class="col-sm-2 col-form-label">EmpName</label><div class="col-sm-10"><input type="text" formControlName="empName" name="empName" class="form-control" id="empName" placeholder="员工姓名">
<div class="form-group row"><label for="empDesgn" class="col-sm-2 col-form-label">Emp Title</label><div class="col-sm-10"><input type="text" formControlName="empDesg" name="empDesg" class="form-control" id="empDesgn" placeholder="Employee Title">
<p>表单值:{{ empForm.value |json }}</p><div class="form-group row"><div class="col-sm-2">技能组</div><div class="col-sm-10"><div class="form-check"><input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">爪哇
<div class="form-check"><input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">点网
<div class="form-check"><input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">开发运营
<div class="form-check"><input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">业务分析师
<div class="form-check"><input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">自动化测试
<div class="form-check"><input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">用户体验
<div class="form-group row"><div class="col-sm-10"><button type="submit" class="btn btn-primary" (click)="diag()">添加员工</button>
</表单>
addEmpComponent.ts
import { Component, OnInit } from '@angular/core';从'../Employee'导入{员工}import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';@成分({选择器:'app-addemployee'，templateUrl: './addemployee.component.html',styleUrls: ['./addemployee.component.css']})导出类 AddemployeeComponent 实现 OnInit {empForm:表单组；构造函数(私人FB:FormBuilder){this.createForm();}创建表单(){this.empForm = this.fb.group({empID: ['', Validators.required],empName: ['', Validators.required],empDesg: ['', Validators.required]});}模型 = 新员工()；ngOnInit() {}}您能否分享一下您的输入，了解如何在我上面的 JSON 结构中使用技能集数组映射复选框.如果你分享我的一段代码，这将是有帮助的.非常感谢.
解决方案
你可以查看 Reactive form 在我创建的一个应用程序中使用它 .此应用还包含其他功能，您迟早会遇到这些功能.
skillList: any[] = ['Java',Dot Net','Dev Ops'];创建表单(){this.empForm = this.fb.group({empID: ['', Validators.required],empName: ['', Validators.required],empDesg: ['', Validators.required],技巧:this.fb.array(['Java','Devops']),});}isSkillChecked(数据){返回 this.rForm.controls['skills'].value.includes(data);}html
技能集:<span *ngFor="let Skill of SkillList"><输入类型=复选框"(change)="onSkillChange(skill,$event.target.checked)"[检查]="isSkillChecked(技能)"/>{{技能}}</span> 我已经修改了我的示例以满足您的需要.看一看让我知道.
I am new to Angular 5. I am currently working on Angular Reactive form. I have a below JSON structure that I need to post back to REST API after getting values from FORM.
JSON structure:
{
"empDesg": "Sr Developer",
"empID": 123,
"empName": "Sam",
"empSkills": [
"Java",
"Devops"
]
}
I managed to map empID, empName and empDesg to formcontrols; they all going to be input text elements. I wanna map empSkills to Checkboxes using formcontrols or formarray (but am not sure which one to use)- Here only I am stuck.
My HTML and component class:
addEmp.component.html
<form class="form-emp" [formGroup]="empForm">
<div class="form-group row ">
<label for="empID" class="col-sm-2 col-form-label">EmpID</label>
<div class="col-sm-10">
<input type="text" formControlName="empID" name="empID" class="form-control" id="empID" placeholder="Employee ID">
<div *ngIf="empForm.controls.empID.invalid && empForm.controls.empID.touched">
<ngb-alert type="danger" [dismissible]="false">Employee ID is must</ngb-alert>
</div>
</div>
</div>
<div class="form-group row">
<label for="empName" class="col-sm-2 col-form-label">EmpName</label>
<div class="col-sm-10">
<input type="text" formControlName="empName" name="empName" class="form-control" id="empName" placeholder="Employee Name">
</div>
</div>
<div class="form-group row">
<label for="empDesgn" class="col-sm-2 col-form-label">Emp Title</label>
<div class="col-sm-10">
<input type="text" formControlName="empDesg" name="empDesg" class="form-control" id="empDesgn" placeholder="Employee Title">
</div>
</div>
<p>Form value: {{ empForm.value | json }}</p>
<div class="form-group row">
<div class="col-sm-2">Skillset</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Java
</label>
</div>
<div class="form-check">
<input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Dot Net
</label>
</div>
<div class="form-check">
<input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Dev Ops
</label>
</div>
<div class="form-check">
<input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Business Analyst
</label>
</div>
<div class="form-check">
<input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Automation Testing
</label>
</div>
<div class="form-check">
<input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
UX
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" (click)="diag()">Add Employee</button>
</div>
</div>
</form>
addEmpComponent.ts
import { Component, OnInit } from '@angular/core';
import { Employee } from '../Employee'
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-addemployee',
templateUrl: './addemployee.component.html',
styleUrls: ['./addemployee.component.css']
})
export class AddemployeeComponent implements OnInit {
empForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.empForm = this.fb.group({
empID: ['', Validators.required],
empName: ['', Validators.required],
empDesg: ['', Validators.required]
});
}
model = new Employee();
ngOnInit() {
}
}
Could you please share your inputs on how to map Checkboxes with skillSet array in the JSON structure I have above. If you share me the piece of code that would be helpful.
Thanks a lot.
解决方案
You can check about Reactive form in an app which I have created to play around with it . This app includes other features as well which you’ll surely come across sooner or later.
skillList: any[] = ['Java',Dot Net','Dev Ops'];
createForm() {
this.empForm = this.fb.group({
empID: ['', Validators.required],
empName: ['', Validators.required],
empDesg: ['', Validators.required],
skills: this.fb.array(['Java','Devops']),
});
}
isSkillChecked(data) {
return this.rForm.controls['skills'].value.includes(data);
}
html
<label>Skill Set:
<span *ngFor="let skill of skillList">
<input type="checkbox"
(change)="onSkillChange(skill,$event.target.checked)"
[checked]="isSkillChecked(skill)" /> {{skill}}
</span>
</label>
I have modified my example to suit your needs. Take a look and let me know.
这篇关于角反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
