如果文本框值是AngularJs中下一个文本框的自动输入，如何隐藏错误

Question

I have a form in which I have a textbox for providing nationality and once I input the country name, corresponding country code is auto input to the next textbox which is a contact number field.

HTML

 <input type="text" name="country" class="form-control" typeahead-on-select="change(nationality)" ng-model="nationality" typeahead="country  as country.contName for country in countries |  filter:$viewValue | limitTo:10" ng-readonly={{viewMode}} placeholder="Country Name" required />
 <input type="text" class="form-control" name="number" ng-model="number"    ng-pattern="/^[ ()+]*([0-9][ ()+]*){12}$/" placeholder="Contact No" required/>
    <span ng-show="myForm.number.$error.pattern"><span style="color:red">Please Enter 10 digit Number </span>
</span>

JS

$scope.nationality='';
$scope.countries   = [{ 'contName': 'India', 'code':'+91'}, { 'contName':   'Brazil',      'code':'+55'},
                          { 'contName': 'Pakistan',   'code':'+92'}, { 'contName':  'New Zealand', 'code':'+64'},
                          { 'contName': 'Canada',      'code':'+01'}, { 'contName': 'France',      'code':'+33'}];

$scope.change=function()
            {
                $scope.number = $scope.nationality.code;

            };

The problem is, when I select a country, corresponding country code auto populated in contact number field and it is showing error(Enter 10 digit). I want to show this error message only after the user gives some input manually or after moving to the next textbox. How to do it?

Answer 1

Considering your form has a name xyz . Then after you assigned the number to your form, try calling $scope.xyz.$setPristine();

$scope.change = function() {
    $scope.number = $scope.nationality.code;
    $scope.xyz.$setPristine();
};