Conditional Rendering of a Form Based on Case Status LWC (if:true)

Question

I am trying to get a form to render conditionally based on the Status value of a case (don't ask me why I'm doing this just trying to learn about attributes, @wire, etc.). Any help would be appreciated and thanks in advance.

Currently throwing this error:

Here is my code:

HTML

<template if:true{status = 'Closed'}>
    <lightning-edit-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        fields={fields}
        columns="2"
        mode="edit"
        onsubmit={handleSubmit}>
    </lightning-edit-record-form>
</template>

JS

import { LightningElement, api, wire } from 'lwc';
import STATUS_FIELD from '@salesforce/schema/Case.Status';
import CASE_REASON_FIELD from '@salesforce/schema/Case.Reason';
import INTERNAL_COMMENTS_FIELD from '@salesforce/schema/Case.Comments';
import { getFieldValue, getRecord } from 'lightning/uiRecordApi';


export default class CloseCase extends LightningElement {
    @api recordId;
    @api objectApiName;

    caseFields = [STATUS_FIELD, CASE_REASON_FIELD, INTERNAL_COMMENTS_FIELD];


    handleSubmit(event){
        event.preventDefault();
        const caseFields = event.detail.fields;
        this.template.querySelector('lightning-edit-record-form').submit(caseFields);
    }

    
    @wire(getRecord, {recordId: '$recordId', fields: caseFields})
    case;

    get status() {
        return getFieldValue(this.case.data, STATUS_FIELD);
    }
  //  loadCase({ data }) {
   // this.status = getFieldValue(data, STATUS_FIELD)
   // }


}

**XML**

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
      <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

---

export default class CloseCase extends LightningElement {
    @api recordId;
    @api objectApiName;
    currentstatus;

    caseFields = [STATUS_FIELD, CASE_REASON_FIELD, INTERNAL_COMMENTS_FIELD];


    handleSubmit(event){
        event.preventDefault();
        const caseFields = event.detail.fields;
        this.template.querySelector('lightning-edit-record-form').submit(caseFields);
    }

    
    @wire(getRecord, {recordId: '$recordId', fields: caseFields})
    case;

    get status() {
         if(this.case.status = 'Closed') {
           return currentstatus = false;
         } else {
             return currentstatus = true;
         }
    }
  //  loadCase({ data }) {
   // this.status = getFieldValue(data, STATUS_FIELD)
   // }


}

Answer 1

2 things:

1.- you need to wrap your template in <template></template> tags - no expressions allowed.

<template>
    //other templates can go here
</template>

2.- your condition cannot be declared in the template tag as you could in aura.

a heads up, if(this.case.status = 'Closed') you are assigning a value to this.case.stataus, in order to compare against a value, you need to use == or === or != !== check Comparisons and logical operators

also, for simplicity, you can use a ternary operator instead of if/else statements

return (comparison) ? true : false;

so, create a getter (which you already have) and check for a property value (true/false) or use the property directly:

<template if:true={proeprty}>

You can check Migrate Expressions for well documented examples and usage