Angular - значение радиокнопки по умолчанию не проверено - PullRequest
Новая
       32

Angular - значение радиокнопки по умолчанию не проверено

0 голосов
/ 28 марта 2019

Я все.Я не специалист по Angular, и я застрял в проблеме, которую не могу решить!: (

Это сценарий: есть модал с 2 вкладками, и в каждой вкладке есть форма с группой переключателей. (Компонент одинаковый)

  1. В TAB1 переключатели оцениваются из const, определенного в файле environment.ts.
  2. В TAB2 переключатели оцениваются из ответа REST Api. Я хочу, чтобы переключатель был установлен по умолчанию, еслисвойство «checkedFirst» имеет значение true.

Это константа, в которой значения TAB1 

export const ColorsForRadio: Colors[] = [
  {
    id: '1',
    name: 'red',
    checkedFirst: false
  },
  {
    id: '2',
    name: 'green',
    checkedFirst: true
  }
]

Это REST Api Response со значениями TAB2 

 {
    id: '1',
    name: 'red',
    checkedFirst: false
  },
  {
    id: '3',
    name: 'blue',
    checkedFirst: true
  },
   {
    id: '5',
    name: 'yellow',
    checkedFirst: false
  }

Это html 

<div *ngFor="let color of colorsForRadio$ | async">
      <label class="radio-label">
        <input type="radio" formControlName="colorsForRadio" class="radio" [value]="color" [checked]="color.checkedFirst"/>
        {{ color.name }}
      </label>
    </div>

У меня 2 вида проблем:

  1. , когда я открываю модальный режим, в TAB1 переключатель «зеленый» не проверяется, даже если значение«checkFirst» читается правильно. Если я перехожу на TAB2 и после того, как вернулся к TAB1, переключатель «зеленый» становится правильно проверенным. Эта проблема проверяется только с TAB1, потому что в TAB2 проверено правильное радио («синее»)правильно с первого раза. Можетзависит от const?
  2. , даже если установлен переключатель (по крайней мере, графически), он не считается проверенным, потому что проверка на событие отправки формы завершается неудачно.Эта проблема проверяется на обеих вкладках.

Может кто-нибудь дать мне предложения о том, как решить?Спасибо

1 Ответ

0 голосов
/ 28 марта 2019

Я бы сделал это, установив управляющее значение в файле машинописного текста, но для этого мне нужно было бы избегать канала async из шаблона, а вместо этого сделать подписку на .ts и соответственно установить значение для formControl.

Допустим, у вас есть переменная apiData, которую вы используете для получения данных из API и использования ее для зацикливания в шаблоне.

Что-то вроде: 

ngOnInit() {
  this.parentForm = new FormGroup({
    'color': new FormControl()
  })

  this.getData().subscribe((data) => {  // getData() is request to the API
    // find the data which was true,
    let defaultValue = data.find(eachData => eachData.checkedFirst);
    if (defaultValue) {
      this.parentForm.get('color').setValue(defaultValue.name)
    }
    this.apiData = data;
  })
}

Ваш HTML будет выглядеть так: 

<form [formGroup]="parentForm">
  <div *ngFor="let eachCheckBox of apiData">
    {{eachCheckBox.name}}
    <input type="radio" formControlName="color" [value]="eachCheckBox.name">
  </div>
</form>

Смотрите рабочий пример здесь: https://stackblitz.com/edit/angular-jlgidp?file=src%2Fapp%2Fapp.component.ts

...