11.2.8 - 练习

获取一组复选框中选中的值

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
// 定义 Data 接口类型
interface Data {
    name: string
    value: string
}
@Component({
    selector: 'app-checkbox',
    templateUrl: './checkbox.component.html',
    styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
    Data: Array<Data> = [
        { name: "Pear", value: "pear" },
        { name: "Plum", value: "plum" },
        { name: "Kiwi", value: "kiwi" },
        { name: "Apple", value: "apple" },
        { name: "Lime", value: "lime" }
    ]
    form: FormGroup
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            checkArray: this.fb.array([])
        })
    }
    onChange(event: Event) {
        const target = event.target as HTMLInputElement
        const checked = target.checked
        const value = target.value
        const checkArray = this.form.get("checkArray") as FormArray
        if (checked) {
            checkArray.push(this.fb.control(value))
        } else {
            const index = checkArray.controls.findIndex(
                control => control.value === value
            )
            checkArray.removeAt(index)
        }
    }
    onSubmit() {
        console.log(this.form.value)
    }
    ngOnInit(): void {
    }
}

<form [formGroup]="form" (submit)="onSubmit()">
    <label *ngFor="let item of Data">
        <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
        {{ item.name }}
    </label>
    <button>提交</button>
</form>

获取单选框中选中的值

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
    selector: 'app-checkbox',
    templateUrl: './checkbox.component.html',
    styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
    form: FormGroup
    constructor(public fb: FormBuilder) {
        this.form = this.fb.group({ gender: "" })
    }
    onSubmit() {
        console.log(this.form.value)
    }
    ngOnInit(): void {
    }
}

<form [formGroup]="form" (submit)="onSubmit()">
    <input type="radio" value="male" formControlName="gender" /> Male
    <input type="radio" value="female" formControlName="gender" /> Female
    <button type="submit">Submit</button>
</form>