Precautions:
Radio button in the form and name value must be the same fromControlName
1. Import
import { ReactiveFormsModule } from '@angular/forms'
2.html template
<form [formGroup]="fg">
<Label> Sex: </ label>
<input type="radio" id="male"
name="sex" value='1'
formControlName="sex">
<label for="male">男</label>
<input type="radio" id="female"
name="sex" value='2'
formControlName="sex">
<label for="female">女</label>
<button (click)="run()">跳转</button>
</form>
3. ts files
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 in the form of deconstruction
// do not remove the key value for the value of sex
let {sex}=this.fg.value;
console.log(sex);
}
}