如何在反应式 angular 表单中使用复选框

Question

I am new to angular, currently I am looking checkboxes in angular, I have three checkboxes and I have to show checked or unchecked checkboxes in UI.

I am getting enabled/disabled from json, I need to show if am getting enabled means checkbox should be checked and disabled means unchecked checkbox.

This is what am trying in html

 <form [formGroup]="portFilterGroup">
      <div class="form-group row">
            <div class="col-md-4 text-left" id="email">
                <label for="email"><input type="checkbox" (change)="onChecked($event)"  formcontrolName="emailData"  value="{{emailData}}" [checked]="isChecked"  >&nbsp;
                    <b>Email(POP3, IMAP, SMTP)</b></label>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-md-4 text-left" id="ftp">
                <label for="ftp"><input type="checkbox" formcontrolName="ftpData"  [checked]="isChecked" value="{{ftpData}}">&nbsp; <b>FTP</b></label>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-md-4 text-left" id="http">
                <label for="http"><input type="checkbox" formcontrolName="httpData"
                    [checked]="isChecked">&nbsp;<b>HTTP</b></label>
            </div>
        </div>
    </form>

typescript file

  portFilterForm(){
    this.portFilterGroup = this.fb.group({
      emailData: new FormControl(''),
      ftpData: new FormControl(''),
      httpData: new FormControl('')
    })
  }

 
  onChecked(e){  
    console.log("e", e.target) 
    if (e.target == 'enabled'){
      this.isChecked = true; 
    }
    else{
      this.isChecked = false;
    }
  }

  gettingData(){
  this.httpClient.get("assets/json/data.json").subscribe((data:any) =>{
    console.log(data);
    this.emailData = this.onChecked(data.email)
    this.httpData = this.onChecked(data.http)
 })
}

and the json file be

{
    "email": "enabled",
    "ftp": "disabled",
    "http": "enabled"
}

this is the code am trying, but am not get the expecting output(enabled means checked and disabled means unchecked) can anyone help me to this?

Answer 1

Ok so you can use the angular way read here

html

<form [formGroup]="portFilterGroup">
  <div class="form-group row">
    <div class="col-md-4 text-left" id="email">
      <label
        ><input
          type="checkbox"
          [formControl]="portFilterGroup.controls['emailData']"
        />&nbsp; <b>Email(POP3, IMAP, SMTP)</b></label
      >
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-4 text-left" id="ftp">
      <label
        ><input
          type="checkbox"
          [formControl]="portFilterGroup.controls['ftpData']"
        />&nbsp; <b>FTP</b></label
      >
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-4 text-left" id="http">
      <label
        ><input
          type="checkbox"
          [formControl]="portFilterGroup.controls['ftpData']"
        />&nbsp;<b>HTTP</b></label
      >
    </div>
  </div>
</form>
{{ portFilterGroup.value | json }}
<button (click)="gettingData()">submit</button>

ts file

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 6';
  portFilterGroup: FormGroup;

  constructor(private fb: FormBuilder) {
    this.portFilterForm();
  }

  portFilterForm() {
    this.portFilterGroup = this.fb.group({
      emailData: new FormControl(false),
      ftpData: new FormControl(false),
      httpData: new FormControl(false),
    });
  }

  gettingData() {
    console.log(this.portFilterGroup.value);
    // this.httpClient.get('assets/json/data.json').subscribe((data: any) => {
    //   console.log(data);
    //   this.emailData = this.onChecked(data.email);
    //   this.httpData = this.onChecked(data.http);
    // });
  }
}

stackblitz