Angular 角反应形式
我是新手。我目前正在研究角度反应形式。我有一个下面的JSON结构,我需要在从表单中获取值后将其发回RESTAPI JSON结构:Angular 角反应形式,angular,angular-reactive-forms,Angular,Angular Reactive Forms,我是新手。我目前正在研究角度反应形式。我有一个下面的JSON结构,我需要在从表单中获取值后将其发回RESTAPI JSON结构: { "empDesg": "Sr Developer", "empID": 123, "empName": "Sam", "empSkills": [ "Java", "Devops" ] } 我设法将empID、empName和empDesg映射到fo
{
"empDesg": "Sr Developer",
"empID": 123,
"empName": "Sam",
"empSkills": [
"Java",
"Devops"
]
}
我设法将empID、empName和empDesg映射到formcontrols;它们都将成为输入文本元素。我想使用FormControl或formarray将empSkills映射到复选框(但不确定使用哪一个)-这里只有我被卡住了
我的HTML和组件类:
addamp.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>
你能分享一下你对如何将复选框映射到我上面提到的JSON结构中的skillSet数组的看法吗。如果你和我分享这段代码,那会很有帮助。
非常感谢。您可以查看反应式表单。这个应用程序还包括其他一些你迟早会遇到的功能
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>
技能集:
{{skill}}
我已经修改了我的例子以适应你的需要。请查看并让我知道。home.component.html
谢谢你,沙申克。你收集了很多例子。对于empId,empName和empDesg I添加了验证器。如何为FormArray添加验证程序?你能解释一下吗。@user2427147:看一看。如果你需要进一步的帮助,一定要告诉我。如果您喜欢我的github回购协议,您可以“启动”它并进行后续操作,我正在使用主题示例不断更新回购协议。您是否尝试添加
验证器。在我的示例中需要?我现在无法检查,所以请尝试一下,让我知道。
<label>Skill Set:
<span *ngFor="let skill of skillList">
<input type="checkbox"
(change)="onSkillChange(skill,$event.target.checked)"
[checked]="isSkillChecked(skill)" /> {{skill}}
</span>
</label>
<div>
<p>Form 1</p>
<form [formGroup]="registerForm">
<div *ngFor="let grpdata of statusdata">
<input type="checkbox" formControlName="title" value="{{grpdata.groupid}}" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">{{grpdata.groupname}}<br>
</div>
<div *ngIf="submitted && f.title.errors" class="invalid-feedback">
<div *ngIf="f.title.errors.required">Title is required</div>
</div>
<button type="submit" (click)="getSelectedVal()">Click here</button>
</form>
</div>
<div>
<p>Form 2</p>
<form [formGroup]="editForm">
<input type="textbox" disabled formControlName="edithidden" [(ngModel)]="hello" class="form-control"><br>
<div *ngFor="let grpdata of statusdata">
<input type="checkbox" formControlName="edittitle" value="{{grpdata.groupid}}" class="form-control" [ngClass]="{ 'is-invalid': submitted1 && g.edittitle.errors }">{{grpdata.groupname}}<br>
</div>
<div *ngIf="submitted1 && g.edittitle.errors" class="invalid-feedback">
<div *ngIf="g.edittitle.errors.required">Title is required</div>
</div>
<button type="submit" (click)="editSelectedVal()">Click here</button>
</form>
</div>
import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
submitted = false;
submitted1 = false;
getListData: any;
registerForm: FormGroup;
editForm: FormGroup;
statusdata: any;
constructor(private commonserviceService: CommonserviceService,private formBuilder: FormBuilder)
{
this.registerForm = this.formBuilder.group({
title: ['', Validators.required],
});
this.editForm = this.formBuilder.group({
edittitle: ['', Validators.required],
edithidden: new FormControl()
});
}
ngOnInit() {
this.statusdata = [{"groupid":1,"groupname":"project1"},{"groupid":2,"groupname":"project2"},{"groupid":3,"groupname":"project3"}];
}
get f() { return this.registerForm.controls; }
get g() { return this.editForm.controls; }
getSelectedVal(){
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
console.log('submitted');
}
editSelectedVal(){
this.submitted1 = true;
// stop here if form is invalid
if (this.editForm.invalid) {
return;
}
console.log('submitted edit');
}
}