Angular Route Param Values Not Binding with ngClass Ternary

Question

My return value from my html ternary, previewForm.value['joint_application'] is binding the incorrect string output within form-page.component.html. User is expected to navigate back from this preview page to home page to edit this value in another form which populates the URL with params which are then processed by previewForm

previewForm.value['joint_application'] takes the parameters from the URL is parsed to find whether the params is true or false then displays it accordingly on the html.

This ternary doesnt seem to alternate accordingly based on the URL:

{{ previewForm.value['joint_application'] ? 'Me & My Partner': 'Just Me' }}

So if joint_application=true in the URL I expect 'Me & My Partner', however I only get 'Just Me'

However this does alternate from true and false accordingly

{{ previewForm.value['joint_application'] }}

My typical URL would be:

http://localhost:4200/quote-form;joint_application=true

Which is passed from my home page to this quote-form page via this route:

app.module.ts

const appRoutes: Routes = [
    { path: 'quote-form', component: FormPageComponent },
]

form-page.component.ts

export class FormPageComponent implements OnInit {
    public previewForm: FormGroup;

    constructor(
        private fb: FormBuilder,
        private route: ActivatedRoute,
        private router: Router
    ){ }

    ngOnInit() {
        this.previewParamValues()
    }

    previewParamValues() {
        this.route.params.subscribe(params => {
            this.previewForm = this.fb.group({
                joint_application: params.joint_application,
            });
        })
    }

form-page.component.html

<form [formGroup]="previewForm">
    <div class="form-group form-inline">
        <h6 small ><b>Quotes For: &nbsp;</b></h6>
        <h6 small>{{ previewForm.value['joint_application'] ? 'Me & My Partner': 'Just Me' }}</h6>
    </div>
</form>

Answer 1

You need to create a form control instead of just passing the value when creating a form group.

previewParamValues() {
  this.route.params.subscribe(params => {
    this.previewForm = this.fb.group({
      //                 <---- create control here
      joint_application: this.fb.control(params.joint_application),
    });
  })
}

And a word of warning - be careful to convert your param value into a boolean. If you param ever looks like joint_application=false, I suspect you would just get the string value "false", which is still truthy.

Instead, you should create your form control using a boolean value:

Angular <= 8

this.fb.control(!!params.joint_application && 
  params.joint_application.toLowerCase() === 'true')

Angular >= 9

this.fb.control(params.joint_application?.toLowerCase() === 'true')

EDIT

The "bang bang" operator !! isn't strictly necessary in the <= v8 version, unless you care about comparing against strict boolean types.

Here's a rather trivial example:

const value = null;

const result1 = value && value === 'true';
const result2 = !!value && value === 'true';

const check1 = result1 === false;
const check2 = result2 === false;

console.log("(value && value === 'true') === false");
console.log(check1);
console.log("(!!value && value === 'true') === false");
console.log(check2);

And thinking about it, the equivalent to this in the >= v9 version would be

this.fb.control(params.joint_application?.toLowerCase() === 'true' || false)