角度 – 单选按钮切换不以反应形式工作

UI

[！[在此输入图片说明] [1]] [1]

代码 – 根据JoséGazzano评论更新代码

<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>

零件

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;
        }
    }


}