Turn off Chrome auto complete

[abelrgr]

I'm building a CRUD with autofields, but Chrome always populate the "userName" and "password" with the auto fill values, this is my code:

if (id) {
    $http.get('/api/users/'+id).then(function(resp) {
        $scope.formModel = resp;
    });
} else {
    $scope.formModel = {
        firstName: '',
        lastName: '',
        userName: '',
        password: ''        
    };
};
$scope.schema = [{
    type: 'multiple',
    fields: [{
        property: 'firstName',
        label: 'First Name',
        type: 'text',
        columns: 6
    }, {
        property: 'lastName',
        label: 'Last Name',
        type: 'text',
        columns: 6
    }]
}, {
    type: 'multiple',
    fields: [{
        property: 'userName',
        label: 'User Name',
        type: 'text',
        columns: 6
    }, {
        property: 'password',
        label: 'Password',
        type: 'password',
        columns: 6
    }]
}];
$scope.options = {
    validation: {
        enabled: true,
        showMessages: false
    },
    layout: {
        type: 'basic',
        labelSize: 3,
        inputSize: 9
    }
};

The way the data is displayed is with ui-bootrstrap with modals, the second time when the modal is called the data from $scope.formModel is not displayed.

[JustMaier]

Hey @chule143, did a quick search on this, looks like autocomplete in chrome is a common complaint without a solid fix at the moment. Relevant SO post.

As for the data not being displayed the second time, I'd need to see more code, specifically the part that opens the modal.

[abelrgr]

Hi, sorry for the delay, this is the JS code, now is under construction, This is the way the data is managed:

app.controller('adminUsersCtrl', ['$scope', '$uibModal', 'Restangular', function($scope, $uibModal, Restangular) {
    $scope.itemsByPage = 10;
    $scope.users = [{ "id": "56ae9e80275543.92712665", "firstName": "test 1", "lastName": "ap1", "userName": "test", "email": "22222@test.com", "phone": "", "country": "", "city": "", "address": "" }, { "id": "56ae9e893a9a22.47050190", "firstName": "super Admin", "lastName": "yo", "userName": "admin", "email": "3333@test.com", "phone": "", "country": "AG", "city": "", "address": "" }, { "id": "56ae9eb6a65260.24141242", "firstName": "aaaa", "lastName": "aaa", "userName": "test111", "email": "11111@test.com", "phone": "", "country": "AG", "city": "", "address": "" }];

    $scope.displayedUsers = [].concat($scope.users);

    function openModal(id) {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'partials/admin/users-modal.htm',
            controller: 'adminUsersModalCtrl',
            size: 'lg',
            resolve: {
                params: function() {
                    return {
                        id: (id) ? id : false
                    };
                }
            }
        });     
    };

    $scope.addRecord = function() {
        openModal();
    };
    $scope.editRecord = function(id) {
        openModal(id);
    };
    getData();
}]).controller('adminUsersModalCtrl', ['$scope', '$uibModalInstance', 'params', 'Restangular', function($scope, $uibModalInstance, params, Restangular) {
    if (params.id) {
        Restangular.one('data', params.id).get({
            filter: {
                table: 'users'
            }
        }).then(function(resp) {
            $scope.formModel = resp;
        });
    } else {
        var form = Restangular.all('users');
        $scope.formModel = {
            firstName: '',
            lastName: '',
            userName: '',
            password: '',           
            address: '',
        };
    };
    $scope.schema = [{
        type: 'multiple',
        fields: [{
            property: 'firstName',
            label: 'First Name',
            type: 'text',
            columns: 6
        }, {
            property: 'lastName',
            label: 'Last Name',
            type: 'text',
            columns: 6
        }]
    }, {
        type: 'multiple',
        fields: [{
            property: 'userName',
            label: 'User Name',
            type: 'text',
            columns: 6
        }, {
            property: 'password',
            label: 'Password',
            type: 'password',
            columns: 6
        }]
    }, {
        property: 'address',
        label: 'Address',
        type: 'textarea'
    }];
    $scope.options = {
        validation: {
            enabled: true,
            showMessages: false
        },
        layout: {
            type: 'basic',
            labelSize: 3,
            inputSize: 9
        }
    };
    $scope.saveUser = function() {
        if (params.id) {
            $scope.formModel.put({
                table: 'users'
            }).then(function(resp) {
                $uibModalInstance.close();
                // alert('Updated');
            });
        } else {
            form.post($scope.formModel, {
                table: 'users'
            }).then(function(resp) {
                $uibModalInstance.close();
            });
        };
    };
    $scope.close = function() {
        $uibModalInstance.dismiss('cancel');
    };
}])

Ps. It's really useful your library :)

[abelrgr]

I found this article: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

This is the code with autofields:

{
            type: 'multiple',
            fields: [{
                property: 'userName',
                label: 'User Name',
                type: 'text',
                columns: 6,
                attr: {
                    autocomplete: 'nope'
                }
            }, {
                property: 'password',
                label: 'Password',
                type: 'password',
                columns: 6,
                attr: {
                    autocomplete: 'nope'
                }
            }]
        }

And works like this:

The first time runs correctly and the second one is autofilled with the chrome autofill option

This is the code with html directly:

<div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="username">User Name</label>
                    <input ng-model="formModel.userName" type="text" class="form-control" id="username" placeholder="User Name" autocomplete="nope">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="password">Password</label>
                    <input ng-model="formModel.password" type="password" class="form-control" id="password" placeholder="Password" autocomplete="nope">
                </div>
            </div>
        </div>

and works normally all the time:

[JustMaier]

Not sure if I'm seeing it correctly, but it looks like the autocomplete:
nope works correctly the first time but not the second?

On Sun, Apr 3, 2016 at 10:49 AM, Abel notifications@github.com wrote:

I found this article:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

This is the code with autofields:

{
type: 'multiple',
fields: [{
property: 'userName',
label: 'User Name',
type: 'text',
columns: 6,
attr: {
autocomplete: 'nope'
}
}, {
property: 'password',
label: 'Password',
type: 'password',
columns: 6,
attr: {
autocomplete: 'nope'
}
}]
}

And works like this:
[image: autofields]
https://cloud.githubusercontent.com/assets/1250071/14233862/55edcb7c-f9a2-11e5-9253-24eced430dcc.gif
The first time runs correctly and the second one is autofilled with the
chrome autofill option

This is the code with html directly:

User Name

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="password">Password</label>
                <input ng-model="formModel.password" type="password" class="form-control" id="password" placeholder="Password" autocomplete="nope">
            </div>
        </div>
    </div>

and works normally all the time:
[image: html]
https://cloud.githubusercontent.com/assets/1250071/14233867/78a9762a-f9a2-11e5-885a-2aeabaf5f499.gif

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#46 (comment)

[masakik]

Hi, I have solved this by putting before auto:fields .... tag:
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
found digging internet somewhere.