1

私はAngular 2 Reactive Formビルダーを次のように使用しています:

<div class="questionSection">
    <b class="questionTitle">Remove records that don't have:</b>
    <div class="horizontalOptions">
        <label 
        class="horizontalOption"
        *ngFor="let choice of excludeRecords"
        >
            <input type="checkbox"
            [value]="choice.value"
            formControlName="excludedRecords"
            >
            {{choice.label}}
        </label>
    </div>
</div>

値を配列にしたいのexcludedRecordsですが、これは HTML を生成する変数です。

excludeRecords = [
        {label: 'Full Mailing Address', value:'fullMailing', checked:false},
        {label: 'Full Office Address', value:'fullOffice', checked:false},
        {label: 'Email Address', value:'emailAddress', checked:false},
        {label: 'Phone #', value:'phoneNum', checked: false},
    ];

そして、これは私が最初のフォーム選択を生成する方法です:

constructor(private formBuilder: FormBuilder) {
    this.initialValues = {
        mainChoice: 'entireUSA',
        excludedRecords: [],
        stateChoice: 'all',
        includedStates: [],
        specialtyChoice: 'all',
        includedSpecialties: []
    }
    this.form = formBuilder.group(this.initialValues);
    this.formSelections = this.initialValues;

    this.form.valueChanges.subscribe(
        data => {
            console.log('form changed', data);
            this.formSelections = data;
        }
    );
}

現在、値をtrueまたはfalseに切り替えるだけですが、各チェックボックスの入力で値の配列を出力したいのですが、これはAngular2 Form Builderで可能ですか?

4

1 に答える 1