问题描述
限时送ChatGPT账号..我是 Angular 5 的新手.我目前正在研究 Angular Reactive 表单.我有一个以下 JSON 结构,我需要在从 FORM 获取值后将其回发到 REST API.
JSON 结构:
<代码> {"empDesg": "高级开发人员",empID":123,"empName": "山姆","empSkills": ["爪哇",开发者"]}
我设法将 empID、empName 和 empDesg 映射到表单控件;它们都将成为输入文本元素.我想使用 formcontrols 或 formarray 将 empSkills 映射到复选框(但不确定使用哪个)- 只有我被卡住了.
我的 HTML 和组件类:
addEmpponent.html
addEmpComponent.ts
import { Component, OnInit } from '@angular/core';从'../Employee'导入{员工}import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';@成分({选择器:'app-addemployee',templateUrl: './addemployeeponent.html',styleUrls: ['./addemployeeponent.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
我已经修改了我的示例以满足您的需要.看一看让我知道.
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:
addEmpponent.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: './addemployeeponent.html',
styleUrls: ['./addemployeeponent.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屋!
更多推荐
[db:关键词]
发布评论