45

我正在使用反应式表单在 Angular 中构建一个表单。我正在使用 FormBuilder 来制作一组字段。对于文本框，这非常有效。但我找不到单选按钮的 formControl。

这是如何运作的？我应该<input formControlName="gender" type="radio">像使用文本输入一样使用吗？

4

6 回答 6

41

我应该<input formControlName="gender" type="radio">像处理文本输入那样做吗？

是的。

这是如何运作的？

表单控制指令使用ControlValueAccessor指令与本机元素进行通信。ControlValueAccessors每个可能的输入都有不同的类型。正确的一个由selector值访问器指令选择。选择器基于是type什么<input>。当您拥有 时type="radio"，将使用无线电的值访问器。

于 2016-10-10T11:57:10.160 回答
40

在您的组件中，将您的单选按钮定义为表单的一部分：

export class MyComponent {
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      gender: ""
    });
  }
}

在您的组件 HTML 中，构建您的表单：

<div class="form-group">
  <label>Please select your gender</label>
  <div class="row">
    <label class="md-check">
      <input type="radio" value="female" name="gender" formControlName="gender">
      Female
    </label>

    <label class="md-check">
      <input type="radio" value="male" name="gender" formControlName="gender">     
      Male
    </label>
  </div>
</div>

我假设您知道如何使用提交按钮构建整个表单，此处未显示。

提交表单时，您可以在此处获取单选按钮的值：

let genderValue = this.form.value.gender;

这将是“女性”或“男性”，具体取决于选中的单选按钮。

希望这对您有所帮助。祝你好运！

于 2016-10-10T15:47:05.693 回答
6

关于我注意到的反应式表单的一个小补充。如果该值是整数，则需要将其更改为字符串，否则将不会选择单选按钮..

  this.jobForm = this._fb.group({
                    id: [res["job"]["id"]],
                    job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required],
                    title: [res["job"]["title"],Validators.required]
                });
于 2016-12-21T07:57:03.293 回答
3

Angular Material 控件（大部分）已经足够成熟，现在可以使用了。

他们的示例主要使用 ngModel，但这里是使用 formControlName 的方法。

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem">
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button>
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button>
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button>
</mat-radio-group>

我正在使用angular/flex-layout将按钮放在垂直列中。

（也可以value='Blue'用于常量或[value]="blueColorName"引用模型属性。

我认为可能存在问题，0因为它不是“真实”值，因此请注意您是否绑定到枚举（可能不再是问题）。

于 2018-01-17T20:37:58.487 回答
0 
  <form [formGroup]="form" >
    <div class="row" style="margin-left: 20px; margin-bottom: 13px;">
      <label class="colmn radio" style="font-size: 17px;text-transform: capitalize;">
        <input type="radio" value="false" name="filter" formControlName="filter">
            Daily
        <span class="checkmark"></span>
      </label>

      <label class="colmn radio" style="font-size: 17px;text-transform: capitalize;margin-left: 56px">
        <input type="radio" value="true" name="filter" [checked]="true" formControlName="filter">     
            Monthly
        <span class="checkmark"></span>
      </label>

    </div>
  </form>



  form: FormGroup;

  constructor(    private _fb: FormBuilder,
   ) {

    this.form = _fb.group({
      filter: false
    });

    this.__filterChangeSubscription =  this.form.get('filter').valueChanges.subscribe(
      filterValue => {
        console.log(filterValue)
      }
    )
  }
于 2020-04-07T14:45:13.713 回答
-1

Angular Reactive 表单适用于收音机，它适用于输入文本框。找到下面的 HTML 代码和组件，使用电子邮件文本框和单选按钮来选择用户。

值得注意的一点： formControlName 必须与父 formGroup 指令一起使用。所以你的formcontrol需要在formgroup里面绑定

export class AppComponent  {

      form: FormGroup;
      someError = '';

      ngOnInit() {
        this.form = new FormGroup({
          'username': new FormControl(''),
          'password': new FormControl(''),
          'radiotest': new FormControl('')
        });
      }
      reset() {
        this.form.reset();
        this.someError = '';
      }
    }

html代码：

<form [formGroup]="form">
    <label for="email">username</label>
    <input type="email" class="form-control" formControlName = "username">
    <input type="radio" formControlName="user" value="vimal"/>Vimal
    <input type="radio" formControlName="user" value="babu"/>Babu
</form>
<button (click)="reset()">Reset</button>
<h3> {{ someError }} </h3>
<h3> {{ form.value | json }} </h3>
于 2019-11-16T08:57:37.527 回答