输入表单中的 AngularJS 中不显示特殊字符，例如％＆？ @

Question

我有一个 AngularJS 表单，它在输入框下方的代码片段中显示来自输入框的密码。但是当用户输入密码中的任何特殊字符时，密码就不再显示了，连非特殊字符也不显示了。 Chrome、Firefox 和 Internet Explorer 中的结果相同。

表单脚本：

<script>
    angular.module('tutorialApp', [])
        .controller('TutorialController', ['$scope', function($scope) {
            $scope.tutorial = {
                ipno: '123.456.7.8',
                sudouser: 'mysudouser1',
                dbname: 'mydb1',
                dbuser: 'mydbuser1',
                dbpw: 'mydbpassword',
                yourdomain: 'yourdomain.com',
                your2nddomain: 'test.yourdomain.com',
                name: 'name',
                word: /^\s*\w*\s*$/
            };
        }]);
</script>

表单输入：

<label for="dbpw">Database password:</label>
        <input type="text" name="dbpw" ng-model="tutorial.dbpw" ng-pattern="tutorial.word" id="dbpw">

代码片段：

<code>CREATE USER '<span class="frominput">{{tutorial.dbuser}}</span>'@'localhost' IDENTIFIED BY '<span class="frominput">{{tutorial.dbpw}}</span>';</code>

Answer 1

您需要在 ng-model-options 中添加 allowInvalid。在 input 中添加 - ng-model-options="{ allowInvalid: true }" 检查 - https://docs.angularjs.org/api/ng/directive/ngModelOptions

angular.module('tutorialApp', [])
        .controller('TutorialController', ['$scope', function($scope) {
            $scope.tutorial = {
                ipno: '123.456.7.8',
                sudouser: 'mysudouser1',
                dbname: 'mydb1',
                dbuser: 'mydbuser1',
                dbpw: 'mydbpassword',
                yourdomain: 'yourdomain.com',
                your2nddomain: 'test.yourdomain.com',
                name: 'name',
                word: /^\s*\w*\s*$/
            };
        }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="tutorialApp" ng-controller="TutorialController">
  <label for="dbpw">Database password:</label>
    <input type="text" name="dbpw" ng-model="tutorial.dbpw" ng-pattern="tutorial.word" id="dbpw" ng-model-options="{ allowInvalid: true}">

  <br><br>
  
  <code>CREATE USER '<span class="frominput">{{tutorial.dbuser}}</span>'@'localhost' IDENTIFIED BY '<span class="frominput">{{tutorial.dbpw}}</span>';</code>
</div>

输入表单中的 AngularJS 中不显示特殊字符，例如％＆？ @

Special characters don't show in AngularJS from input form, e.g. % & ? @

data-binding

special-characters

angularjs