1

Angular 4、Bootstrap 4、ngbootstrapでアプリケーションを開発しています。 HTMLコード - 私はbuildForm()メソッドを呼び出すコントローラのngOnInit()フックでng-bootstrapで双方向のバインドが機能しない反応する形式のラジオボタン

<div class="container"> 
    <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)"> 
    <div class="form-group"> 
     <div class="row"> 
     <legend class="col-form-legend col-sm-2">Required</legend> 
     <div class="btn-group col-sm-2" ngbRadioGroup name="isRequired" formControlName="isRequired"> 
      <label ngbButtonLabel class="btn-primary"> 
      <input ngbButton type="radio" name="radio" [value]="true">Yes 
      </label> 
      <label ngbButtonLabel class="btn-primary"> 
      <input ngbButton type="radio" name="radio" [value]="false">No 
      </label> 
     </div> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <div class="col-sm-6"> 
     <button type="submit" class="btn btn-info"> 
      <i class="fa fa-floppy-o fa-lg"></i> 
      Save 
     </button> 
     </div> 
    </div> 
    </form> 
</div> 

コントローラ

private buildForm() { 
    this.myForm = this.formBuilder.group({ 
     isRequired: [], 
    }); 
    } 

。それから、私はHttp getリクエストを作成し、isRequiredフィールドの値を取得します。フェッチが成功した場合、次のメソッドを呼び出してラジオボタンの値を設定します。

private loadFormData() { 
    this.myForm.patchValue({ 
     isRequired: this.variable.isRequired, 
    }); 
} 

問題は - 真のIsRequiredこの=の値を取ることができます。この値 が正しく取得され、フォームロード時にこの値 でラジオが初期化されます。ただし、ユーザーが値を変更すると(isRequired = false)、フィールドには以前の値(isRequired = true)が保持されます。

私は次のコードを使用している場合これは正常に動作します -

<div class="form-group"> 
    <div class="row"> 
     <legend class="col-form-legend col-sm-2">Required</legend> 
     <input type="radio" formControlName="isRequired" value="true"> Yes 
     <input type="radio" formControlName="isRequired" value="false"> No 
    </div> 
</div> 

私が間違って何をやっているの?ユーザーがラジオから任意の値を選択すると、あなたの変数this.variable.isRequiredが更新されていないことを意味リアクティブフォームのThe data model and the form modelガイド

User changes flow from the DOM elements to the form model, not to the data model. The form controls never update the data model.

あたりとして

+0

https://angular.io/guide/reactive-forms#the-data-model-and-the-form-model – ranakrunal9

+0

@ ranakrunal9私は、このリンクに示されているように、反応的なフォームのラジオボタンの例に従っています - > https://ng-bootstrap.github.io/#/components/buttons/examples – codejunkie

答えて

0

。フォームの値を取得するにはthis.myForm.valueを使用するか、ng-bootstrap buttonsで説明したようにngModelをラジオで使用する必要があります。

+0

this.variableは、データベースからフェッチされたオブジェクトです。ラジオボタンの初期値が含まれています。フォームが保存されると、私はmyForm.value.isRequiredをチェックしています。 – codejunkie

+0

ngModelとformControlNameを一緒に使用できますか? – codejunkie

関連する問題