Hide controls based on selected value - angular-formly

Question

For the sample code below (look here for full plunker), how can I hide the "Driver's License Number" textbox if the selected value in the "Province/Territory" dropdown is not equal to 'ontario'? The current behaviour is to disable the "Driver's License Number" textbox. So I would like to hide the textbox rather than disable it.
(function() {
'use strict';
angular
.module('formlyApp')
.controller('MainController', MainController);
function MainController(province) {
var vm = this;
// The model object that we reference
// on the <formly-form> element in index.html
vm.rental = {};
// An array of our form fields with configuration
// and options set. We make reference to this in
// the 'fields' attribute on the <formly-form> element
vm.rentalFields = [
{
key: 'first_name',
type: 'input',
templateOptions: {
type: 'text',
label: 'First Name',
placeholder: 'Enter your first name',
required: true
}
},
{
key: 'last_name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Last Name',
placeholder: 'Enter your last name',
required: true
}
},
{
key: 'email',
type: 'input',
templateOptions: {
type: 'email',
label: 'Email address',
placeholder: 'Enter email',
required: true
}
},
{
key: 'under25',
type: 'checkbox',
templateOptions: {
label: 'Are you under 25?',
},
// Hide this field if we don't have
// any valid input in the email field
hideExpression: '!model.email'
},
{
key: 'province',
type: 'select',
templateOptions: {
label: 'Province/Territory',
// Call our province service to get a list
// of provinces and territories
options: province.getProvinces()
},
hideExpression: '!model.email'
},
{
key: 'license',
type: 'input',
templateOptions: {
label: 'Driver\'s License Number',
placeholder: 'Enter your drivers license number'
},
hideExpression: "(!model.province == 'ontario')",
validators: {
// Custom validator to check whether the driver's license
// number that the user enters is valid or not
driversLicense: function($viewValue, $modelValue, scope) {
var value = $modelValue || $viewValue;
if(value) {
// call the validateDriversLicense function
// which either returns true or false
// depending on whether the entry is valid
return validateDriversLicence(value)
}
}
}
},
{
key: 'insurance',
type: 'input',
templateOptions: {
label: 'Insurance Policy Number',
placeholder: 'Enter your insurance policy number'
},
hideExpression: '!model.under25 || !model.province',
}
];
// Tests the input based on a helpful regular expression
// gratefully borrowed from jQuery.formance by Omar Shammas
// https://github.com/omarshammas/jquery.formance
function validateDriversLicence(value) {
return /[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
})();
Is this possible?
Thanks in advance,
P.S: Fill the form the see the "Province/Territory" dropdown

Answer 1

http://plnkr.co/edit/97pINzLnz3W1HWmy9N0u?p=preview
Change
hideExpression: '!model.province'
To
hideExpression: 'model.province != "ontario"'