Question

所以基本上它就像这个plunker

<form [formGroup]="form">
  <div class="form-control" *ngFor="let item of foods">
    <input type="radio" formControlName="food" value="{{item}}"> {{item}}
  </div>
</form>

一种非常简单的反应形式。

然而，当我把准确的代码放在我的真实项目中时。它没有用。

我可以看到它正在尝试将checked属性设置为true

在这一行this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state);

上

但加载后屏幕上没有标记为已选中。

如果我将类型更改为复选框，则可以正常工作。

如果我使用ngModel，它也能正常工作。

我不知道还有什么可能出错。

更新

我在另一个starter

上测试了它

它也不起作用。

该组件看起来像

import { FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
  <form [formGroup]="form">
   <div *ngFor="let x of foods">
      <input type="radio" value="{{x}}"  formControlName="food"> {{x}}
   </div>
  </form>
`,
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  form;
  foods = ['beef', 'lamb', 'fish'];

  constructor(private _FormBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this._FormBuilder.group({
      food: 'lamb'
    });
  }
}

Answer 1

我终于明白了。 2天。这是困难的一个。我没想到这是可能的。显然，这是来自@ng-bootstrap

的已知问题

这是重复它的plunker。

@NgModule({
  imports: [ 
    BrowserModule,ReactiveFormsModule,    
    NgbModule.forRoot() ],
  declarations: [ App ],
  bootstrap: [ App ]
})

渲染后

1 个答案: