响应式表单的单选按钮示例

注意事项：

　　单选按钮表单里 fromControlName 和name 的值必须相同

1.导入

import { ReactiveFormsModule } from '@angular/forms'

 

2.html模板

 

    性别:

    name="sex" value='1'  formControlName="sex">

    男

    name="sex"  value='2'  formControlName="sex">

    女

    跳转

 

3. ts文件

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

import { FormGroup, FormControl } from '@angular/forms';

@Component({

  selector: 'app-list',

  templateUrl: './list.component.html',

  styleUrls: ['./list.component.css']

})

export class ListComponent implements OnInit {

  public value:string='2';

  constructor() { }

  ngOnInit() {

    this.backGoup();

  }

  

  public fg:FormGroup;

  backGoup(){

     this.fg=new FormGroup(

      {

        sex:new FormControl(this.value)

      }

    );

  }

  run(){

　　//TypeScript里的解构形式 

　　//未取出key 为sex的value值

    let {sex}=this.fg.value;

    console.log(sex);

  }

}