parent.component.ts
import {Component} from '@angular/core';
import {Form, NgForm} from '@angular/forms';
interface Gender {
id: number;
name: string;
title: string;
value: string;
}
const gendersList = [
{id: 1, name: 'gender', value: 'male', title: 'Male'},
{id: 2, name: 'gender', value: 'female', title: 'Female'}
];
@Component({
selector: 'app-switch-case',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
radioList: Gender[] = gendersList;
constructor() { }
onSubmit(form: NgForm): void {
console.log('onSubmit form',form)
}
}
parent.component.html
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<div>
<label for="gender">
<app-radio *ngFor="let radio of radioList"
[title]="radio.title"
[groupName]="radio.name"
[value]="radio.value"
[defaultValue]="'female'"
></app-radio>
</label>
</div>
<button [disabled]="!itemForm.valid" type="submit">Submit</button>
</form>
radio.component.ts
import {Componen, Input} from '@angular/core';
import {ControlContainer, NgForm} from '@angular/forms';
@Component({
selector: 'app-radio',
templateUrl: './radio.component.html',
styleUrls: ['./radio.component.css'],
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class RadioComponent {
@Input() title: string;
@Input() groupName: string;
@Input() value: string;
@Input() defaultValue: string;
@Input() isRequired: boolean;
constructor() { }
}
radio.component.html
<div>
<input
type="radio"
[value]="value"
[name]="groupName"
[ngModel]="defaultValue"
[required]="isRequired"
>
<span>{{title}}</span>
</div>
[checked]=" 'checked' "
- Kamil KiełczewskiunitTrustsPnl = 0;
。 - Pengyy