How to set a default value for an AMP uninitialized variable?

Question

<input type="checkbox" [required]="(currentState == null) ? (true) : (false)">

amp-bind: Default value for [required] does not match first expression result (true). This can result in unexpected behavior after the next state change.

EDIT: Maybe some more context could help

<amp-state id="privacySettings">
      <script type="application/json">{                                   
           "general": {
               "mp": "required",
               "p1": false,
               "p5": false
           },
           "specific": {
               "mp": false,
               "p1": "required",
               "p5": "required",
               "ck": false
           }
       }
   </script>
</amp-state>
<div class="privacy">
    <div id="pmaindiv">
        <input on="tap:err_mess.hide" role="mainmandatoryprivacy" tabindex="1" type="checkbox" name="main-privacy" id="pmain" class="pmain" value="1"  [required]=privacySettings[currentState].mp  [checked]=privacySettings[currentState].ck >

Every attempt to assign to [require](but it also stands for [checked] and, I guess, for other attributes) a value(statically or through a var) gets the bind-amp error.

<amp-state id="temp">
     <script type="application/json">
          {
           "var": "general"
            }
     </script>
</amp-state>

(...)  [required]="(currentState==null) ? privacySettings[temp.var].mp : privacySettings[currentState].mp" (...)

It passes validation and works fine if currentState is setted via 'on' attribute.

Answer 1

Are you setting the required attribute as well as the [required] binding?

Try this:

<input type="checkbox" 
       [required]="(currentState == null ? 'true' : 'false')" 
       required="true">

Separately, if a variable is not defined you can use this,

(myVar || 'defaultVal')

If myVar is not defined, then the value defaultVal will be used instead.

But the most correct way to set a default value is to use <amp-state> like this:

  <amp-state id="props">
    <script type="application/json">
      {
        "myVar": "blah"
      }
    </script>
  </amp-state>

Then you would use that variable by prefixing with the id you gave to the amp-state element like this:

props.myVar

EDIT: The following works for me

Note:
1. Setting currentState in the initial amp-state element
2. Default value for basic required attribute

<amp-state id="privacySettings">
    <script type="application/json">
    {   
      "currentState":"general",                              
      "general": {
        "mp": "required",
        "p1": false,
        "p5": false
      },
      "specific": {
        "mp": false,
        "p1": "required",
        "p5": "required",
        "ck": false
      }
     }
 </script>
</amp-state>
<div class="privacy">
    <div id="pmaindiv">
        <input role="mainmandatoryprivacy" tabindex="1" type="checkbox" name="main-privacy" id="pmain" class="pmain" value="1"  
        required="required"
        [required]=privacySettings[privacySettings.currentState].mp
        >

  </div>
</div>

EDIT 2: The following should also work, when currentState has not been initialised:

<amp-state id="privacySettings">
    <script type="application/json">
    {                              
      "general": {
        "mp": "required",
        "p1": false,
        "p5": false
      },
      "specific": {
        "mp": false,
        "p1": "required",
        "p5": "required",
        "ck": false
      }
     }
 </script>
</amp-state>


<amp-state id="temp">
     <script type="application/json">
          {
           "var": "general"
            }
     </script>
</amp-state>

<div class="privacy">
    <div id="pmaindiv">
        <input role="mainmandatoryprivacy" tabindex="1" type="checkbox" name="main-privacy" id="pmain" class="pmain" value="1"  
        required="required"
        [required]=(currentState==null?privacySettings[temp.var].mp:currentState) 
        >

  </div>
</div>