Angular2 Reactive Forms formControl用于单选按钮

时间:2016-10-10 10:50:36

标签: angular angular2-forms

我正在使用Reactive Forms在Angular2中构建一个表单。我正在使用FormBuilder来创建一组字段。对于文本框,这非常有效。但我找不到单选按钮的formControl。

这是如何工作的?我应该像文字输入那样<input formControlName="gender" type="radio">吗?

6 个答案:

答案 0 :(得分:33)

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

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;

根据选中的单选按钮,这将是“女性”或“男性”。

希望这会对你有所帮助。祝你好运!

答案 1 :(得分:31)

  

我应该像文字输入那样<input formControlName="gender" type="radio">吗?

  

这是如何运作的?

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

答案 2 :(得分:5)

我注意到一些关于Reactive表单的小补充。如果值是整数,则需要将其更改为字符串,否则不会选择单选按钮。

  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]
                });

答案 3 :(得分:2)

Angular Material controls(大部分)已经足够成熟,现在可以使用。

他们的样本大多使用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可能存在问题,因为它不是真正的问题。值,请注意,如果您绑定到枚举(可能不再是问题)。

答案 4 :(得分: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)
      }
    )
  }

答案 5 :(得分:-1)

Angular Reactive表单适用于广播,与输入文本框相同。找到下面的HTML代码和组件,使用电子邮件文本框和单选按钮选择用户。

值得注意的点: formControlName必须与父formGroup指令一起使用。因此,您的formcontrol需要绑定在formgroup内

{
  "/api": {
    "target": {
      "host": "itunes.apple.com/search?term=drake"",
      "protocol": "https",
      "port": xxx
    },
    "secure": false,
    "changeOrigin": true
    "pathRewrite": {
      "^/api": ""
    }
  }
}

HTML代码:

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 = '';
      }
    }