Angular Reactive Form

Question

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.

Shashank Vivek · Accepted Answer · 2018-04-12 05:28:32Z

5

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.

edited Apr 12, 2018 at 5:28

answered Apr 11, 2018 at 19:27

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2427147 Over a year ago

Thanks a lot Shashank. You got good collection of examples. For empId,empName and empDesg I added validators. How to add Validator for FormArray? Could you please throw light on that.

Shashank Vivek Over a year ago

@user2427147: Take a look at stackoverflow.com/questions/42038099/…. If you need further help, do let me know. If you like my github repo, you can "star" it and follow up , i am continuously updating the repo with topic wise examples.

Shashank Vivek Over a year ago

Did you try adding Validators.required in my example ? I cant check as of now so plz try that and let me know.

ankush · Accepted Answer · 2019-12-03 19:05:01Z

home.component.html

<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>

home.component.ts

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');  
 }
}

Collectives™ on Stack Overflow

Angular Reactive Form

2 Answers 2

3 Comments

home.component.html

home.component.ts

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

home.component.html

home.component.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related