如何发布复选框值而不是布尔值 - Angular 5

Question

我有这个模板驱动的表单：

<form #form="ngForm" (submit)="submitForm()" novalidate>
    <div class="form-group" [class.has-error]="linkName.invalid">
        <label class="control-label" for="name">Name</label>
        <input #linkName="ngModel" type="text" class="form-control" name="name" id="name" [(ngModel)]="finalData.name" required />
        <div *ngIf="linkName.invalid" class="alert alert-danger">Name is required</div>
    </div>
    <div class="form-group">
        <label for="url">Url</label>
        <input type="text" class="form-control" id="url" name="url" [(ngModel)]="finalData.url" readonly/>
    </div>
    <div class="checkbox" *ngFor="let tag of finalData.tags; index as i" [attr.data-index]="i">
        <label><input type="checkbox" name="{{ 'checkbox' + tag }}" id="{{ 'checkbox' + tag }}" (ngModel)="finalData.tags[i]"/>{{ tag }}</label>
    </div>         
    <button type="submit" [disabled]="form.invalid" class="btn btn-primary btn-success">Save</button>
</form>

我想根据他们是否检查来从checkboxes 中获取POST 的值。 这种方式与单向绑定(ngModel) 它将POST 所有tags 是否检查与否。如果我使用双向绑定[(ngModel)]，它将发布布尔值，它会根据布尔值更改name 和id，这是我不想要的。

示例： 如果我检查这个我想要 POST foo 而不是 true

<label><input type="checkbox" name="footag" id="footag" value="foo" [(ngModel)]="finalData.tags[i]"/>foo</label>

这是用于数据绑定的组件：

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 => {
                this.finalData = data;
                this.router.navigate(["/"]);
            }, err => console.log(err));
    }

    ngOnInit(): void {
        //let url = encodeURIComponent(this.route.snapshot.queryParams['url']);
        //this.data.loadData(url)
        //    .subscribe(finalData => {
        //        this.finalData = finalData;
        //    }); 
        this.finalData = this.route.snapshot.data['finalData'];
    }
}

FinalFormData 类：

export class FinalFormData {
    name: string;
    url: string;
    dateCreated: Date;
    tags: any[];
}

Answer 1

您可以使用 ngModelChange 方法来传递值并将其设置为您想要的任何变量。参考下面的示例代码sn-p：

<label><input type="checkbox" name="footag" id="footag" value="foo" [ngModel]="finalData.tags[i]" (ngModelChange)="CheckBoxValueChange('foo',finalData)"/>foo</label>

在 component.ts 文件中，您可以访问该值并将其设置为您想要的任何变量：

CheckBoxValueChange(checkboxValue:string,finalData:any){
    finalData.checkboxText=checkboxValue;
    alert(checkboxValue);
}