Question

我正在使用WKWebView登录网站的iOS应用程序上工作。该网站提供了一个用AngularJS编写的登录表单，其中包含一个UserId和Password。我正在尝试使用javascript预填充UserId来填充适当的值：

document.getElementsByName('UserId')[0].value = 'MyUserId'

提交后，该表单将返回“无效凭据”，就像userid输入字段保留为空白一样。如果随后我对UserId输入字段进行了任何手动更改，然后重新提交，则可以使用。

我已验证UserId确实包含正确的值。我还尝试过在提交表单之前更改AngularJS字段属性：

ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required

在我的JavaScript代码中，请确保将UserId转换为与javascript兼容的字符串：

UserId.toString()

手动键入UserId并从1Password自动填充可以正常工作。

我将不胜感激。

表单的角度代码：

<form class="spark-splash-screen__form spark-text-left ng-dirty ng-valid-parse ng-valid ng-valid-required" novalidate="" name="loginCtrl.loginForm" ng-submit="loginCtrl.submitForm()">
            <p class="spark-margin-top--lg spark-margin-bottom" translate="">Sign In to.</p>
            <label class="spark-input" fang-input="" ng-class="{
                            'active': loginCtrl.formData.id
                         }">
                <input class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="UserId" placeholder="Enter User ID..." role="textbox" required="" ng-model="loginCtrl.formData.id" autofocus="">
                <span class="spark-label">User ID</span>
            </label>
            <label class="spark-input" fang-input="" ng-class="{
                            'active': loginCtrl.formData.password
                         }">
                <input type="password" class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="Password" placeholder="What is your password?" role="textbox" required="" ng-model="loginCtrl.formData.password">
                <span class="spark-label">Password</span>
                <span class="spark-input__addon spark-input__password-toggle">
                    <i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
                    <i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
                </span>
            </label>
            <fieldset class="row">
                <label class="col-xs-12 spark-checkbox">
                    <input class="spark-checkbox__input ng-pristine ng-untouched ng-valid ng-empty" type="checkbox" name="RememberMe" ng-model="loginCtrl.formData.rememberMe">
                    <span class="spark-checkbox__box"></span>
                    <span class="spark-label" translate="">Remember Me</span>
                </label>
            </fieldset>
            <div class="row">
                <div class="col-xs-12 spark-margin-top">
                    <button type="submit" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-margin-bottom--md spark-pull-right--gte-sm" ng-disabled="loginCtrl.formSubmiting" translate="">Sign In</button>
                    <div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
                        <button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('findUserOrPass')">Forgot User ID or Password?</button>
                        <button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('firstTimeUser')">First-Time User</button>
                    </div>
                </div>
            </div>
        </form>

这是我朝正确的方向指出后的答案：

document.getElementsByName('UserId')[0].value = useridField;
    angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

Answer 1

还尝试分配ng模型（loginCtrl.formData.id）

从loginCtrl（我假设是控制器）中

document.getElementsByName('UserId')[0].value = 'MyUserId';
formData.id = 'MyUserId';

如果异步执行此操作，则可能需要$ apply：

document.getElementsByName('UserId')[0].value = 'MyUserId';
$scope.$apply(function() {
  formData.id = 'MyUserId';
});

Answer 2

这是我朝正确的方向指出后的答案：

document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;

在AngularJS登录页面上自动填充用户ID

2 个答案: