Angular 单选按钮切换不以反应形式工作
我正在开发angular 7中使用被动形式的切换单选按钮功能。目前，单选按钮正在为每个表单数组渲染，但没有在数组之间切换。用户需要能够将其中一个地址设置为主地址。我已经尝试为单选按钮分配新的ID和值，但这并没有产生任何影响 用户界面 [！[在此处输入图像描述][1][1] 代码-根据JoséGazzano的评论更新代码Angular 单选按钮切换不以反应形式工作,angular,angular-reactive-forms,Angular,Angular Reactive Forms,我正在开发angular 7中使用被动形式的切换单选按钮功能。目前，单选按钮正在为每个表单数组渲染，但没有在数组之间切换。用户需要能够将其中一个地址设置为主地址。我已经尝试为单选按钮分配新的ID和值，但这并没有产生任何影响 用户界面 [！[在此处输入图像描述][1][1] 代码-根据JoséGazzano的评论更新代码 <style> .desc-header { background-color: #FAE7D6; color: black
<style>
.desc-header {
background-color: #FAE7D6;
color: black
}
.header {
width: 8%;
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
}
.col-form-label {
padding: 0%;
}
.scrollClass {
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Firm Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input
type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<form [formGroup]="frmFirm" (ngSubmit)="saveManager()">
<div *ngIf="FirmDetails && FirmDetails.Firm" class="card-body scrollClass">
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label modal-label header">Name</label>
<div class="col-md-9">
<div *ngIf="!EditMode">{{FirmDetails.Firm.NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="NAME" />
</div>
</div>
<!--
<div class="form-group row">
<label for="inputTitle" class="col-md-1 col-form-label header">Short Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.SHORT_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="SHORT_NAME" />
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Alternate Name</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{FirmDetails.Firm.ALTERNATE_NAME}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"
formControlName="ALTERNATE_NAME" />
</div>
</div> -->
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label modal-label header">Date Founded</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{dateFoundedDate}}</div>
<kendo-datepicker *ngIf="EditMode" [format]="'MMMM yyyy'"
(valueChange)="dateFoundedChanged($event)" formControlName="DATE_FOUNDED"
class="form-control">
</kendo-datepicker>
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-md-2 col-form-label modal-label header">Websites</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-4">
<label for="inputEmail">Website URL</label>
</div>
<div class="col-md-4">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-4">
<label for="inputEmail">Password</label>
</div>
</div>
</div>
<div class="col-md-9 offset-md-2">
<div formArrayName="Websites"
*ngFor="let item of frmFirm.get('Websites').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-4">
<input formControlName="WEBSITE_URL" class="form-control">
</div>
<div class="col-md-4">
<input formControlName="USERNAME" class="form-control">
</div>
<div class="col-md-3">
<input formControlName="PASSWORD" class="form-control">
</div>
<div class="col-md-1" *ngIf="EditMode">
<button (click)="removeWebsite(i)">RM</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row" *ngIf="EditMode">
<div class="col-md-2 offset-md-2">
<button type="button" (click)="addWebsite()">Add Website</button>
</div>
</div>
</div>
<div *ngIf="EditMode">
<button type="button" (click)="addAddress()">Add Address</button>
</div> -->
<div formArrayName="Addresses" *ngFor="let item of frmFirm.get('Addresses').controls; let i = index;">
<div [formGroupName]="test">
<div class="form-group row">
<label class="col-md-2 col-form-label"> Primary Address
</label>
<div class="col-md-2">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="primary1Id{{i}}" type="radio" value="home{{i}}"
formControlName="IS_HEAD_OFFICE"> Home
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" attr.for="{{'street1Id' + i}}">Line 1
</label>
<div class="col-md-9">
<input class="form-control" id="{{'street1Id' + i}}" type="text"
formControlName="LINE1">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" attr.for="{{'street2Id' + i}}">Line 2
</label>
<div class="col-md-9">
<input class="form-control" id="{{'street2Id' + i}}" type="text"
formControlName="LINE2">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" attr.for="{{'street3Id' + i}}">Line 3
</label>
<div class="col-md-9">
<input class="form-control" id="{{'street3Id' + i}}" type="text"
formControlName="LINE3">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" attr.for="{{'phoneId' + i}}">Phone
</label>
<div class="col-md-9">
<input class="form-control" id="{{'phoneId' + i}}" type="text"
formControlName="SWITCHBOARD_INT">
</div>
</div>
<div class="form-group row" *ngIf="EditMode">
<div class="col-md-9 offset-md-2">
<button type="button" (click)="removeAddress(i)">Remove Address</button>
</div>
</div>
</div>
</div>
<div class="form-group row " *ngIf="EditMode">
<div class="col-md-2 offset-md-2">
<button type="button" (click)="addAddress()">Add Address</button>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<span *ngIf="EditMode"><button type="submit" class="btn btn-primary btn-view-all btn mr-3">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelManager">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteManager()">Delete</button>
</span>
</div>
</form>
</div>
</div>
.描述标题{
背景色：#FAE7D6；
颜色：黑色
}
.标题{
宽度：8%；
}
.小组标题{
颜色：白色；
背景色：#F59850；
边框颜色：#ddd；
}
.col表格标签{
填充：0%；
}
.滚动类{
高度：500px；
溢出y：滚动；
溢出x：隐藏；
}
具体细节
编辑模式
名称
{{FirmDetails.Firm.NAME}
成立日期
{{dateFoundedDate}
网站
网站地址
用户名
密码
RM
添加网站
添加地址
-->
主地址
家
第1行
第2行
第3行
电话
删除地址
添加地址
拯救
取消
删除
import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild, Input } from '@angular/core';
import { OnInit } from '@angular/core';
import { FirmService } from '../services/firm.service';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CommonDataService } from '../services/common.data.service';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
import { ListItem } from '../models/listItem';
@Component({
selector: 'mgr-firm',
templateUrl: './firm.component.html'
})
export class FirmComponent implements OnInit {
private Error: string;
public FirmDetails: any;
public EditMode: boolean;
public Editor = ClassicEditor;
public EditorConfig: string;
public originalContactList: any;
public originalCityList: any;
public events: string[] = [];
@Input() FirmId: number;
DateFoundedDate: Date;
public frmFirm: FormGroup;
public value: Date = new Date();
constructor(private _fb: FormBuilder, private firmService: FirmService, private commonDataService: CommonDataService) {
}
ngOnInit() {
this.initializeFormModel();
this.getFirmDetails();
}
initializeFormModel() {
this.frmFirm = this._fb.group({
NAME: [''],
SHORT_NAME: [''],
ALTERNATE_NAME: [''],
DATE_FOUNDED: [''],
HISTORY_HTML: [''],
People: [''],
Websites: this._fb.array([
this.createWebsite()
]),
Addresses: this._fb.array([
this.createAddress()
])
});
}
public addWebsite(): void {
this.Websites.push(this.createWebsite());
}
public removeWebsite(index: number): void {
const websites = this.frmFirm.get('Websites') as FormArray;
if (websites.length === 1)
{
websites.reset();
return;
}
websites.removeAt(index);
}
private createWebsite(): FormGroup {
return this._fb.group({
WEBSITE_URL: [''],
USERNAME: [''],
PASSWORD: ['']
});
}
public addAddress(): void {
this.Addresses.push(this.createAddress());
}
public removeAddress(index: number): void {
const addressess = this.frmFirm.get('Addresses') as FormArray;
if (addressess.length === 1)
{
addressess.reset();
return;
}
addressess.removeAt(index);
}
private createAddress(): FormGroup {
return this._fb.group({
// city: [''],
LINE1: [''],
LINE2: [''],
LINE3: [''],
// zipCode: [''],
SWITCHBOARD_INT: ['']
});
}
get Websites(): FormArray {
return <FormArray>this.frmFirm.get('Websites');
}
get Addresses(): FormArray {
return <FormArray>this.frmFirm.get('Addresses');
}
get cities(): ListItem[] {
return JSON.parse(this.FirmDetails.LongCitiesJson).map(x => new ListItem(x.CITY_ID, x.CITY_NAME, null));
}
setFormValues(FirmDetails: any) {
this.frmFirm.patchValue({
NAME: FirmDetails.Firm.NAME,
SHORT_NAME: FirmDetails.Firm.SHORT_NAME,
ALTERNATE_NAME: FirmDetails.Firm.ALTERNATE_NAME,
DATE_FOUNDED: this.getDate(FirmDetails.Firm.DATE_FOUNDED),
HISTORY_HTML: FirmDetails.Firm.HISTORY_HTML,
People: FirmDetails.People
});
this.websites.patchValue(this.modifyFormGroupValues(FirmDetails.Websites, this.websitesMap))
this.websites.patchValue(this.modifyFormGroupValues(FirmDetails.Websites, this.websitesMap));
this.addressess.patchValue(this.modifyFormGroupValues(FirmDetails.Addresses,this.addressesMap))
const addressGroup = FirmDetails.Firm.Addresses.map(address => {
return this._fb.group({
ID: [address.ID],
LINE1: [address.LINE1],
LINE2: [address.LINE2],
LINE3: [address.LINE3],
SWITCHBOARD_INT: [address.SWITCHBOARD_INT],
IS_HEAD_OFFICE: [address.IS_HEAD_OFFICE],
CITY: [address.CITY],
CITY_ID: [address.CITY_ID],
POSTAL_CODE: [address.POSTAL_CODE],
FIRM_ID: [address.FIRM_ID]
});
});
const addressFormArray: FormArray = this._fb.array(addressGroup);
this.frmFirm.setControl('Addresses', addressFormArray);
const websiteGroup = FirmDetails.Firm.Websites.map(website => {
return this._fb.group({
ID: [website.ID],
WEBSITE_URL: [website.WEBSITE_URL],
USERNAME: [website.USERNAME],
PASSWORD: [website.PASSWORD],
FIRM_ID: [website.FIRM_ID]
});
});
const wesbiteFormArray: FormArray = this._fb.array(websiteGroup);
this.frmFirm.setControl('Websites', wesbiteFormArray);
}
getFirmDetails() {
if (this.FirmId != null) {
this.firmService.getFirmDetails(this.FirmId)
.subscribe(data => {
this.FirmDetails = data;
this.originalContactList = this.FirmDetails.People;
this.originalCityList = JSON.parse(this.FirmDetails.LongCitiesJson);
this.setFormValues(this.FirmDetails);
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
}
get dateFoundedDate(): string {
if (this.FirmDetails.Firm.DATE_FOUNDED != null) {
const dateString = this.FirmDetails.Firm.DATE_FOUNDED;
const results = parseInt(dateString.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
const date = new Date(results);
const month = date.toLocaleString('en-us', { month: 'long' });
return (month + '-' + date.getFullYear());
}
}
private getDate(dateFounded: string): Date {
if (dateFounded != null) {
const results = parseInt(dateFounded.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
const date = new Date(results);
return new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
}
}
saveManager() {
const result = Object.assign(this.FirmDetails.Firm, this.frmFirm.value);
//this.FirmDetails.Firm = Object.assign({}, result.Firm);
//const firm = {...this.FirmDetails.Firm, ...this.frmFirm.value};
this.firmService.createFirm(this.FirmDetails)
.subscribe(data => {
this.getFirmDetails();
this.EditMode = !this.EditMode;
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
public keyContactChange(value: any): void {
this.FirmDetails.Firm.KEY_CONTACT_ID = value;
}
public dateFoundedChanged(value: Date): void {
this.FirmDetails.Firm.DATE_FOUNDED = value;
}
handleFilter(value) {
if (value.length >= 1) {
this.FirmDetails.People = this.originalContactList.filter((s) => s.FIRST_NAME.toLowerCase().indexOf(value.toLowerCase()) !== -1);
} else {
this.FirmDetails.People = this.originalContactList;
}
}
}
import{Component，Injectable，NgZone，viewenclosuration，ViewChild，Input}来自'@angular/core'；
从“@angular/core”导入{OnInit}；
从“../services/firm.service”导入{FirmService}；
从“@ckeditor/ckeditor5 build classic”导入*作为ClassicEditor；
从“../services/common.data.service”导入{CommonDataService}；
从'@angular/forms'导入{FormGroup，FormControl，FormBuilder，FormArray}；
从“../models/ListItem”导入{ListItem}；
@组成部分({
选择器：'公司经理'，
templateUrl:“./firm.component.html”
})
导出类FirmComponent实现OnInit{
私有错误：字符串；
公开资料：任何；
公共编辑模式：布尔；
公共编辑器=ClassicEditor；
公共编辑器配置：字符串；
公共原始联系人列表：任何；
公共原始目录：任何；
公共事件：字符串[]=[]；
@Input（）FirmId：数字；
DateFoundedDate：日期；
公共财务公司：FormGroup；
公共值：日期=新日期（）；
构造函数（private-fb:FormBuilder，private-firmService:firmService，private-commonDataService:commonDataService）{
}
恩戈尼尼特（）{
这是.initializeFormModel（）；
此参数为.getFirmDetails（）；
}
initializeFormModel（）{
this.frmFirm=this.\u fb.group({
姓名：['']，
短名称：['']，
备选名称：['']，
成立日期：['']，
历史记录[U HTML:['']，
人：['']，
网站：这个([
<div class="form-group row">
<label class="col-md-2 col-form-label"> Primary Address </label>
<div class="col-md-2">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="primary1Id{{i}}" type="radio" value="home{{i}}"
formControlName="IS_HEAD_OFFICE"/> <span>Home</span>
</label>
</div>
</div>
</div>
<div formArrayName="Addresses" *ngFor="let item of frmFirm.get('Addresses').controls; let i = index;">
<div [formGroupName]="i"> --> This formGroupName should be the same on each loop in order to make the radio buttons to toggle between them
<div class="form-group row">
<label class="col-md-2 col-form-label"> Primary Address
</label>
<div class="col-md-2">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="primary1Id{{i}}" type="radio" value="home{{i}}"
formControlName="IS_HEAD_OFFICE"> Home
</label>
</div>
</div>
</div>
<div [formGroupName]="i">
onPrimaryToggled(newValue: any, changedItem: FormControl) {
if (newValue.returnValue === true) {
const toChange = this.frmFirm.get('Addresses').controls.filter(el => el !== changedItem);
toChange.forEach(el => el.patchValue({
IS_HEAD_OFFICE: false
}));
}
}
(change)="onPrimaryToggled($event, item)"
<div formArrayName="Addresses" *ngFor="let item of frmFirm.get('Addresses').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group row">
<label class="col-md-2 col-form-label"> Primary Address </label>
<div class="col-md-2">
<div class="form-check">
<label class="form-check-label">
<input
class="form-check-input"
id="primary1Id{{i}}"
type="radio"
formControlName="IS_HEAD_OFFICE"
(change)="OnPrimaryToggled($event, item)"
> Home
</label>
</div>
</div>
</div>
</div>
</div>