2016-12-05 3 views
3

Я начиная с угловыми 2 и в настоящее время с использованием версии 2.2.2Угловых 2 Радиокнопки не Initializing правильно с реактивной формой

Я пишу реактивную форму, но я не смог инициализировать кнопку выбранного радио. Страница должна загружаться с выбранной радиокнопкой, но это не происходит.

Мне не удалось найти причину проблемы. Из примеров кода в Интернете я думаю, что это должно работать. Вот фрагмент моего кода.

<form [formGroup]="consultaSolicitudesINETELForm" (ngSubmit)="consulta(consultaSolicitudesINETELForm)"> 
<input type="radio" formControlName="criterio" value="1" /> 
<input type="radio" formControlName="criterio" value="2" /> 
<input type="radio" formControlName="criterio" value="3" /> 
<input type="text" formControlName="folio" placeholder="folio" required> 
</form> 

для компонента

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 
@Component({ 
moduleId: module.id, 
selector: 'my', 
templateUrl: 'my.component.html', 
styleUrls: ['my.component.css'] 
}) 
export class My implements OnInit { 

myForm: FormGroup; 

constructor(private fb: FormBuilder) { 

} 

ngOnInit(): void { 
    this.buildForm(); 
} 

buildForm(): void { 

    this.consultaSolicitudesINETELForm = this.fb.group({ 
    criterio: ["2"], 
    folio: ["TEST"], 

    }); 

    this.myForm.valueChanges.subscribe(data => this.onValueChanged(data)); 
    this.onValueChanged(); 

} 

EDIT: Here является plnkr я раздвоенный из примера, где я добавил радио, что не работает в моей среде. Единственная разница, которую я вижу там, - это номера версий.

EDIT2: ОК, я нашел, что это как-то связано с ng-bootstrap. Если я использую NgbModule.forRoot(), то переключатели не инициализируются и не работают должным образом, если я отключу ng-bootstrap, тогда они работают, но поскольку я использую ng-bootstrap в другом месте, я не могу этого сделать.

Я обходил его, используя собственную группу переключателей ng-bootstrap и перепроектируя веб-страницу. У меня были переключатели, помещенные внутри легенды различных полей, и весь контент всегда был видимым. Теперь радиостанции работают как вкладки, отображающие разные div в зависимости от текущего выбора.

Оригинальная пуговица радиокнопки должна была выбрать рабочий набор, в котором все его элементы были бы включены, а все остальные объекты полей отключены.

+0

Ваши радиостанции должны иметь то же имя. – Milad

ответ

1

Эта проблема с нг-загрузчике и отслеживается на https://github.com/ng-bootstrap/ng-bootstrap/issues/1125

Это высокий приоритет для них.

+0

Я столкнулся с аналогичной проблемой. Не могли бы вы помочь? https://stackoverflow.com/questions/47388377/two-way-binding-not-working-in-ng-bootstrap-radio-button-in-an-angular-reactive/47388971#47388971 – codejunkie