角反应形式-Java 学习之路

我是Angular 5的新手 . 我目前正在研究Angular Reactive表单 . 我有一个以下JSON结构，我需要在从FORM获取值后回发到REST API .

JSON结构：

{
  "empDesg": "Sr Developer",
  "empID": 123,
  "empName": "Sam",
  "empSkills": [
                "Java",
                "Devops"
               ]
 }

我设法将empID，empName和empDesg映射到formcontrols;它们都将成为输入文本元素 . 我想使用formcontrols或formarray将empSkills映射到Checkboxes（但我不确定使用哪一个） - 这里只有我被卡住了 .

我的HTML和组件类：

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() {

  }  

}

您能否分享一下如何在我上面的JSON结构中使用skillSet数组映射Checkbox的输入 . 如果你与我分享一些有用的代码 . 非常感谢 .

1 回答

您可以查看活动表格in an app which I have created to play around with it . 此应用程序还包括其他功能，您肯定迟早会遇到 .

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>

我修改了我的例子以满足您的需求 . 看一看，让我知道 .

回复于 2024-04-28T15:34:48+08:00

角反应形式

1 回答

相关问题