私はAngular 2から始めて、現在バージョン2.2.2を使用しています
リアクティブフォームを書いていますが、選択したラジオボタンを初期化できません。ラジオ ボタンが選択された状態でページが読み込まれるはずですが、これは行われていません。
問題の原因を突き止めることができませんでした。Web 上のコード サンプルから、これは機能するはずだと思います。これが私のコードのスニペットです。
<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();
}
編集:
これは、私plnkr の環境では実行されないラジオを追加した例からフォークしたものです。私が見る唯一の違いはバージョン番号です。
EDIT2：OK、ng-bootstrapと関係があることがわかりました。NgbModule.forRoot() を使用すると、ラジオ ボタンが初期化されず、期待どおりに機能しません。
ng-bootstrap 独自のラジオ ボタン グループを使用し、Web ページを再設計することで回避しました。さまざまなフィールドセットの凡例内にラジオ ボタンを配置し、すべてのコンテンツを常に表示しました。現在、ラジオはタブのように機能し、現在の選択に応じて異なる div を表示します。
ラジオ ボタンの本来の目的は、すべての要素が有効になり、他のすべてのフィールドセットのコンテンツが無効になる作業フィールドセットを選択することでした。