title: Cannot assign to read only property 'closed' of object '[object Object]'
body: <p>I've been cracking my head on this for a few days now, but I can't find the reason why this is happening.</p>
  
  <p>So I'm getting the following error message: </p>
  
  <blockquote>
    <p>TypeError: Cannot assign to read only property 'closed' of object '[object Object]'</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/AV7fT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AV7fT.png" alt="enter image description here"></a></p>
  
  <p>So as you can see, it happens in the civilliability-step3.component.ts at the sendProposal function:</p>
  
  <p><code>civilliability-step3.component.ts</code></p>
  
  <pre><code>@Component({
    selector: 'app-civilliability-step3',
    templateUrl: './civilliability-step3.component.html',
    styleUrls: ['./civilliability-step3.component.scss']
  })
  export class CivilliabilityStep3Component implements OnInit, OnDestroy {
    @Output() modelChange = new EventEmitter&lt;CivilLiabilityRequestType&gt;();
    @Output() onCloseForm = new EventEmitter();
    @Input() model: CivilLiabilityRequestType;
  
    public formGroup: FormGroup;
  
    private closedProposalSub: Subscription;
  
    constructor(private formBuilder: FormBuilder, private store: Store) {}
  
    ngOnInit() {
      this.buildForm();
  
      if (this.model !== undefined &amp;&amp; this.model.details.closed) {
        disableFormGroup(this.formGroup);
      }
  
      this.closedProposalSub = this.store
        .select(ProposalsState.closedProposalResult)
        .subscribe(val =&gt; {
          if (val !== undefined) {
            this.modelChange.emit(val);
            this.onCloseForm.emit();
          }
        });
    }
  
    ngOnDestroy() {
      if (this.closedProposalSub &amp;&amp; !this.closedProposalSub.closed) {
        this.closedProposalSub.unsubscribe();
      }
      this.store.dispatch(new ResetClosedProposalResult());
    }  
  
    sendProposal() {
      this.model.details.closed = true;
      this.store.dispatch(new CloseProposal(this.model));
    }
  
    closeForm() {
      disableFormGroup(this.formGroup);
    }
  
    private buildForm() {
      this.formGroup = this.formBuilder.group({});
    }
  }
  </code></pre>
  
  <p>Useage of the component:</p>
  
  <p><code>civilliability-detail.component.html</code></p>
  
  <pre><code>&lt;app-civilliability-step3
            (onCloseForm)="step1.closeForm(); step2.closeForm(); step3.closeForm()"
            [(model)]="model"
            #step3&gt;&lt;/app-civilliability-step3&gt;
  </code></pre>
  
  <p>I've tried assigning the true value differently, because I figured maybe I can't add it directly to the model, which is an <code>Input</code>. But that didn't help either.</p>
  
  <pre><code>  sendProposal() {
      const detailsModel = this.model.details;
      detailsModel.closed = true; // &lt;-- same error
      this.model.details = detailsModel;
  
      const tmpModel = this.model;
      tmpModel.details.closed = true; // &lt;-- same error
      this.model = tmpModel;
  
      // this.model.details.closed = true;
      this.store.dispatch(new CloseProposal(this.model));
    }
  </code></pre>
  
  <p><strong>UPDATE 1:</strong> Added CivilLiabilityRequestType</p>
  
  <pre><code>export interface CivilLiabilityRequestType extends IRequestData {
    details: CivilLiabilityDetailsModel;
    questionnaire: CivilLiabilityQuestionnaireModel;
    comments: CivilLiabilityCommentsModel;
  }
  
  export class CivilLiabilityDetailsModel {
    baseReqId: number;
  
    startDate: string;
    branch: NamedResource;
    fractioning: NamedResource;
    closed: boolean;
  }
  </code></pre>
  
  <p><strong>UPDATE 2:</strong> Show origin of this.model:</p>
  
  <p><code>civilliability-detail.component.ts</code> </p>
  
  <pre><code>export class CivilliabilityProposalDetailComponent implements OnInit, OnDestroy {
    @Input() model: CivilLiabilityRequestType;
    @Input() tab: Tab;
    @Input() tabs: Tab[] = [];
    @Input() selectedTabIndex;
    @Input() idx: number;
  
    constructor() {}
  
    ngOnInit() {}
  
    ngOnDestroy() {
      this.model = getEmptyCivilLiabilityRequest();
    }
  }
  
  </code></pre>
  
  <p><code>detail.component.html</code></p>
  
  <pre><code>&lt;mat-tab *ngFor="let tab of tabs; let idx = index"&gt;
  ...
  &lt;app-civilliability-proposal-detail
    [model]="tab.tabData.data"
    [tab]="tab"
    [tabs]="tabs"
    [selectedTabIndex]="selectedTabIndex"
    [idx]="idx"
  &gt;
  &lt;/app-civilliability-proposal-detail&gt;
  ...
  &lt;/mat-tab&gt;
  </code></pre>
  
  <p><code>detail.component.ts</code></p>
  
  <pre><code>@Component({
    selector: 'app-detail',
    templateUrl: './detail.component.html',
    styleUrls: ['./detail.component.scss']
  })
  export class DetailComponent implements OnInit {
    public tabs: Tab[] = [];
    public selectedTabIndex = 0;
    public quote?: QuoteData;
    public quoteModel: QuoteData;
    public originalModel: any[];
    public readonly = false;
    @Input() public requestType;
  
    constructor(private activeRoute: ActivatedRoute) {}
  
    ngOnInit() {
      const snapshot = this.activeRoute.snapshot;
  
      this.originalModel = snapshot.data['model'];
      if (this.originalModel) {
        this.tabs = this.createTabsFromQuoteModel(this.originalModel);
      }
    }
  
    private createTabsFromQuoteModel(model: any): Tab[] {
      let tabs: Tab[] = [];
  
      for (const key of Object.keys(model)) {
        const element = model[key];
        let type: RequestTypes;
        let proposalData: IRequestData = {};
  
        if (key === 'civilLiability') {
          type = RequestTypes.CivilLiability;
          proposalData.type = RequestTypes.CivilLiability;
          proposalData.data = element;
        }
  
        tabs = [...tabs, { type: type, name: '', tabData: proposalData }];
        proposalData = {};
      }
  
      return tabs;
    }
  }
  </code></pre>
  
  <p>And just to give an overview of the structure, to keep us sane:</p>
  
  <pre><code>&lt;app-detail&gt;
    &lt;mat-tab *ngFor="let tab of tabs; let idx = index"&gt;
      &lt;app-civilliability-proposal-detail [model]="tab.tabData.data"&gt;
        &lt;app-civilliability-step3 [(model)]="model" &gt;&lt;/app-civilliability-step3&gt;
        &lt;/app-civilliability-step3
      &lt;/app-civilliability-proposal-detail&gt;
    &lt;/mat-tab
  &lt;/app-detail&gt;
  </code></pre>
  
  <p><strong>UPDATE 3:</strong> Add tabs data:
  <a href="https://i.stack.imgur.com/PXs2m.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PXs2m.png" alt="enter image description here"></a></p>