Angular 6 Reactive Forms input type = «radio» взаимоисключающий выбор - PullRequest
Новая
       15

Angular 6 Reactive Forms input type = «radio» взаимоисключающий выбор

0 голосов
/ 11 февраля 2019

У меня есть форма Angular Dynamic, где я буду загружать данные из службы.Для демонстрации значения жестко закодированы в компоненте.У меня есть флажки и переключатели.Функциональность флажков в порядке.Однако с переключателями есть две проблемы: 1) Они не являются взаимоисключающими - они не являются частью радиогруппы.Если я добавляю свойство name в HTML, dev tools выдает ошибку «Если вы укажете как имя, так и атрибут formControlName на своей радиокнопке, их значения должны совпадать.Пример: ».Так что я думаю, что это не работает в реактивных формах.2) Мне нужно иметь возможность переходить назад и вперед из этой формы (подобно мастеру), и форма должна сохранять значения.Но только флажки сохраняют значения, но не переключатели.Для демонстрации есть кнопка сохранения, которая сохраняет значения в классе data.service, а «Обновить последнее сохранение» имитирует функциональность на тот случай, если нам нужно вернуться назад и получить данные из data.service * 1001.*

Пожалуйста, руководство!Шаблон: 

<form [formGroup]="processDetailsForm" (ngSubmit)="submit()" *ngIf="isFormReady">
    <div class="row">
        <div class="form-group">
            <div class="col-xs-4 margin-bottom" formArrayName='ContactStreamEntries'
                 *ngFor="let HCS of processDetailsForm.controls.ContactStreamEntries.controls; let i = index">
                <input [formControlName]="i" type="radio" name="ContactStreamEntries[i].HCS"
                        [checked]="(i === 0)"
                        [value]="ContactStreamEntries.HCS_ID"
                       (change)="onSelectionChange(entry)"
                       /> {{ContactStreamEntries[i].HCS}}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-xs-4 margin-bottom" formArrayName='ContactStreamsGroups'
                 *ngFor="let name of processDetailsForm.controls.ContactStreamsGroups.controls; let i = index">
                <input [formControlName]="i" type="checkbox" /> {{ContactStreamsGroups[i].name}}
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <button type="submit" id="btnNext"
                    [disabled]="processDetailsForm.invalid">
                save
            </button>
            <button type="submit" id="btnNext" (click)="ReloadProcessDetails()">
                Reload last save
            </button>
        </div>
    </div>
</form>

Компонент: 

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { DataService } from '../../services/data.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-reports',
    templateUrl: './reports.component.html',
    styleUrls: ['./reports.component.scss']
})
export class ReportsComponent implements OnInit {
    processDetailsForm: FormGroup;
    isFormReady: boolean = false;
    private selectedAssets;
    //private selectedGroups;
    public dataProcessDetail;
     ContactStreamsGroups = [
         { id: 1, name: 'Group 1' },
         { id: 2, name: 'Group 2' },
         { id: 3, name: 'Group 3' }
     ];
    ContactStreamEntries = [
        { HCS_ID: 1, HCS: 'ABC' },
        { HCS_ID: 2, HCS: 'DEF' }
    ];
    constructor(private formBuilder: FormBuilder, private _dataService: DataService,
         private _router: Router) { }

    ngOnInit() {
        this.LoadControls();
        if (this._dataService.getBtnOption() === 'Back') {
            this.ReloadProcessDetails();
        }
    }
    submit() {
        this.selectedAssets = this.processDetailsForm.value;
        this.dataProcessDetail = {
            'selectedAssets': this.selectedAssets
        }
        this._dataService.setBtnOption('btnNextORBack', 'Next');

        this._dataService.setOptionProcessDetails('dataProcessDetail', this.dataProcessDetail);
        this._router.navigate(['forms']);
    }
    ReloadProcessDetails() {
        this.dataProcessDetail = this._dataService.getOptionProcessDetails();
        this.processDetailsForm.patchValue(this.dataProcessDetail.selectedAssets);
    }
    LoadControls() {
        const controlGroup = this.ContactStreamsGroups.map(c => new FormControl(false));
        const CS = this.ContactStreamEntries.map(c => new FormControl(false));

        this.processDetailsForm = this.formBuilder.group({
            ContactStreamsGroups: new FormArray(controlGroup),
            ContactStreamEntries: new FormArray(CS)
        });
        this.isFormReady = true;

    }
}

Класс обслуживания: 

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  public btnData: string;
  public processData: any = null;

  setOptionProcessDetails(option, value) {
    this.processData = value;
  }
  getOptionProcessDetails() {
    return this.processData;
  }
  setBtnOption(option, value) {
    this.btnData = value;
  }
  getBtnOption() {
    return this.btnData;
  }
}
...