title: How to POST checkbox value instead of boolean value - Angular 5
body: <p>I have this template-driven form:</p>
  
  <pre><code>&lt;form #form="ngForm" (submit)="submitForm()" novalidate&gt;
      &lt;div class="form-group" [class.has-error]="linkName.invalid"&gt;
          &lt;label class="control-label" for="name"&gt;Name&lt;/label&gt;
          &lt;input #linkName="ngModel" type="text" class="form-control" name="name" id="name" [(ngModel)]="finalData.name" required /&gt;
          &lt;div *ngIf="linkName.invalid" class="alert alert-danger"&gt;Name is required&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="url"&gt;Url&lt;/label&gt;
          &lt;input type="text" class="form-control" id="url" name="url" [(ngModel)]="finalData.url" readonly/&gt;
      &lt;/div&gt;
      &lt;div class="checkbox" *ngFor="let tag of finalData.tags; index as i" [attr.data-index]="i"&gt;
          &lt;label&gt;&lt;input type="checkbox" name="{{ 'checkbox' + tag }}" id="{{ 'checkbox' + tag }}" (ngModel)="finalData.tags[i]"/&gt;{{ tag }}&lt;/label&gt;
      &lt;/div&gt;         
      &lt;button type="submit" [disabled]="form.invalid" class="btn btn-primary btn-success"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to <code>POST</code> value from <code>checkboxes</code> based on whether they checked or not.
  This way with one-way binding <code>(ngModel)</code> it will <code>POST</code> all <code>tags</code> whether they checked or not. If I use two-way binding <code>[(ngModel)]</code> it will POST boolean values and it will change <code>name</code> and <code>id</code> based on boolean value, which I don't want.</p>
  
  <p>Example: 
  If i check this I want POST <code>foo</code> instead of <code>true</code></p>
  
  <pre><code>&lt;label&gt;&lt;input type="checkbox" name="footag" id="footag" value="foo" [(ngModel)]="finalData.tags[i]"/&gt;foo&lt;/label&gt;
  </code></pre>
  
  <p>This is component used for data binding:</p>
  
  <pre><code>import { Component, OnInit, Injectable } from "@angular/core";
  import { DataService } from "../shared/dataService";
  import { FinalFormData } from "../shared/finalFormData";
  import { ActivatedRoute, Router } from '@angular/router';
  import { Observable } from "rxjs/Observable";
  import { NgForm } from "@angular/forms";
  
  @Component({
      selector: "final-form",
      templateUrl: "finalForm.component.html"
  })
  
  export class FinalFormComponent implements OnInit{
  
      constructor(private data: DataService, private route: ActivatedRoute, private router: Router) {
      }
      public finalData: FinalFormData;
      public errorMessage = "";
      public isBusy = true;
  
      submitForm() {
          this.data.postData(this.finalData)
              .subscribe(data =&gt; {
                  this.finalData = data;
                  this.router.navigate(["/"]);
              }, err =&gt; console.log(err));
      }
  
      ngOnInit(): void {
          //let url = encodeURIComponent(this.route.snapshot.queryParams['url']);
          //this.data.loadData(url)
          //    .subscribe(finalData =&gt; {
          //        this.finalData = finalData;
          //    }); 
          this.finalData = this.route.snapshot.data['finalData'];
      }
  }
  </code></pre>
  
  <p>FinalFormData class:</p>
  
  <pre><code>export class FinalFormData {
      name: string;
      url: string;
      dateCreated: Date;
      tags: any[];
  }
  </code></pre>