Angular-Formly: Make a field required if option selected from dropdown box

Question

I want to make an input field required if an option has been selected from a corresponding dropdown box. My 2 fields are duplicated once an option is selected from a dropdown box so user is not limited to a single option. So... if exportSupplier is chosen then agreementReference becomes required. However if there's more than one exportSupplierand at least one of them is not chosen then the form treats agreementReference fields as not required.

How can I make a corresponding agreementReference field required if a corresponding exportSupplier has been chosen?

    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 tried different variations to add $index into that 'templateOptions.required' field but without success.

georgeawg georgeawg · Accepted Answer · 2018-05-22T19:23:40

I have tried different variations to add $index into that 'templateOptions.required' field but without success.

<div ng-repeat="supplier in vm.exportSuppliers" ng-init="outsideIndex = $index">
    <formly-form model="supplier" fields="vm.exportSupplierFields"
        form="vm.informationExportSupplier.form"  ̶i̶n̶d̶e̶x̶"̶$̶i̶n̶d̶e̶x̶"̶
        options="{data: {outsideIndex: outsideIndex}}">
    </formly-form>
</div>

From the Docs:

options

Options for the form.

data

This is an object. Put whatever you want here.

— Angular-formly formly-form Directive API Refeerence

Angular-Formly: Make a field required if option selected from dropdown box

1 Answers

`options`

`data`