I am looking to implement a functionality where an input field becomes required when a specific option is selected from a dropdown box. In my case, the fields are duplicated once an option is chosen to allow users to select multiple options. Specifically, if 'exportSupplier' is chosen, then 'agreementReference' should be marked as required. However, if there are multiple 'exportSuppliers' and at least one of them is not chosen, then the 'agreementReference' fields should not be required.
How can I dynamically set the 'agreementReference' field as required based on whether the corresponding 'exportSupplier' has been selected?
vm.exportSuppliers = [{ exportSupplier: '', agreementReference: '' }];
vm.exportSupplierFields = [
{
fieldGroup: [
{
className: 'col-xs-6',
key: 'exportSupplier',
type: 'select2',
templateOptions: {
label: 'Export Supplier',
required: false,
options: [],
onChange: function() {
vm.addExportSupplier();
}
}
},
{
className: 'col-xs-5',
key: 'agreementReference',
type: 'input',
templateOptions: {
label: 'Agreement Reference',
onChange: function() {
vm.addExportSupplier();
}
},
expressionProperties: {
'templateOptions.required': '!!model["exportSupplier"]'
}
}
]
}
];
vm.addExportSupplier = function() {
if (vm.exportSuppliers[vm.exportSuppliers.length - 1].exportSupplier || vm.exportSuppliers[vm.exportSuppliers.length - 1].agreementReference) {
vm.exportSuppliers.push({ exportSupplier: '', agreementReference: '' });
}
};
My HTML
<div ng-repeat="supplier in vm.exportSuppliers" class="row">
<formly-form model="supplier" fields="vm.exportSupplierFields"
form="vm.informationExportSupplier.form" index="$index">
</formly-form>
</div>
I have experimented with different ways to incorporate $index into the 'templateOptions.required' field without success.