Question

我的应用程序中有两个字段 - 一个用于 emaiSwitch ，其中包含＆＃34; 是，否＆＃34;值和用于输入用户的其他字段 emailId 。

当 emaiSwitch 值为No时，我需要禁用 emailId 文本字段，并在其值为＆＃39;是＆＃39;时启用它。我用它做了

if($scope.email.newValue === 'N') return true转到ng-disabled指令。

我面临的问题是电子邮件模式。当emailSwitch值为＆＃39; Y＆＃39;时，我输入了无效的电子邮件ID，则会出现验证错误。然后，当我将emailSwitch值更改为“N＆＃39;”时，虽然字段已禁用，但之前显示的验证错误不会消失。

这是我的代码

HTML

<select class="select"
        id={{emailSwitch.fieldName}}
        name={{emailSwitch.fieldName}}
        model="emailSwitch.newValue"
        options="emailSwitch.optionsList"
        aria-live="polite"
        role="search"
        value-attr="value"
        labelAttr="label"
        disable="emailSwitch.disabled == 'true'">
</select>
<input type='text'
       ng-pattern=emailId.pattern
       id={{emailId.fieldName}}
       ng-model='emailId.newValue'
       minlength={{emailId.minlength}}
       ng-minlength={{emailId.minlength}}
       maxlength={{emailId.maxlength}}
       ng-required= {{emailId.required}}
       ng-maxlength={{emailId.maxlength}}
       ng-disabled="emailId.disableEmail()"
/>

的Javascript

emailId = {};
emailId.displayName = 'Email Address';
emailId.fieldName = 'emailAddress';
emailId.minlength = 1;
emailId.maxlength = 250;
emailId.required = 'true';
emailId.pattern = Service.emailPattern();
emailId.patternError = $scope.EmailInvalid;
emailId.disableEmail = function () {
var emailSwitch =  emailSwitch.newValue;
if(emailSwitch === 'N')
{
    emailId.minlength = 0;
    emailId.maxlength = 0;
    emailId.required = 'false';
    return true;
}
else
{
    emailId.minlength = 1;
    emailId.maxlength = 250;
    emailId.required = 'true';
    return false;
}
};

修改

经过一番分析后，我了解到emailId.required =＆＃39; true＆＃39;最初设置的是设置所需的＆＃39; true＆＃39;。以下条件是设置必需＆＃39; true＆＃39; false＆＃39;但是，必需属性仍然保持＆＃34;必需＆＃34;。似乎ng-required不会动态设置此html属性＆＃39; required＆＃39;

Answer 1

你可以在emailSwitch.newValue =='N'时清除电子邮件值吗？如果你真的想保存他们输入的值，只需将模式设置为空字符串。

Answer 2

当绑定数据时，ng-pattern接受Sting类型值（例如：ng-pattern =＆＃39; emailId.pattern＆＃39;）从控制器设置值时，您已设置了正确的值类型，如字符串，数字...... nim amd max value应该是String类型值，并且required是boolean值，但是你是stting String type value

更多信息https://docs.angularjs.org/api/ng/directive/input

以下是修改后的代码

＆＃13;

emailId = {};
emailId.displayName = 'Email Address';
emailId.fieldName = 'emailAddress';
emailId.minlength = '1';
emailId.maxlength = '250';
emailId.required = true;
emailId.pattern = Service.emailPattern();
emailId.patternError = $scope.EmailInvalid;
emailId.disableEmail = function() {
  var emailSwitch = emailSwitch.newValue;
  if (emailSwitch === 'N') {
    emailId.minlength = '0';
    emailId.maxlength = '0';
    emailId.required = false;
    return true;
  } else {
    emailId.minlength = '1';
    emailId.maxlength = '250';
    emailId.required = true;
    return false;
  }
};

＆＃13;

<select class="select"
        id='emailSwitch.fieldName'
        name='emailSwitch.fieldName'
        model="emailSwitch.newValue"
        options="emailSwitch.optionsList"
        aria-live="polite"
        role="search"
        value-attr="value"
        labelAttr="label"
        disable="emailSwitch.disabled == 'true'">
</select>
<input type='text'
       ng-pattern='emailId.pattern'
       id='emailId.displayName'
       ng-model='emailId.newValue'
       minlength='emailId.minlength'
       ng-minlength='emailId.minlength'
       maxlength='emailId.maxlength'
       ng-required= 'emailId.required'
       ng-maxlength='emailId.maxlength'
       ng-disabled="emailId.disableEmail()"
/>

＆＃13;

Answer 3

我已经解决了这个问题。 ng-required以String形式获取false / true，并且不动态设置HTMLs required属性。移除{{}}括号（或上面的例子中的＆＃39;＆＃39;）已经给出了ng-required = true，它设置了HTML必需属性。

AngularJS验证 - 电子邮件切换和电子邮件字段

3 个答案: