类型错误：尝试分配给只读属性 - 在文本字段中键入时

Question

我最近将 Angular 从 1.5.x 更新到 1.6.4，现在，当我转到表单时，每当我尝试在表单/文本框中键入内容时，都会收到以下错误消息：

TypeError: Attempted to assign to readonly property.

这是我的控制器：

mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http){

$scope.post = '';
$scope.postCreated = false;

$scope.makeNewPost = function() {

    $http.post('/api/post', {
        title:          $scope.post.title,
    })
    .then(function(res){
        $scope.postCreated = true;
        //extra code not related to the form itself...
  };
}]);

我的 HTML 如下所示：

<form ng-submit="makeNewPost()">
<div class="form-group">
    <label for="title" class="control-label">Title</label>
    <input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>

<input type="submit" value="Submit">
</form>

我查了一下这个错误，我看到的一切都与我的设置无关。

请帮我解决这个问题。我不知道从这里去哪里。

谢谢

Answer 1

尝试这个...

您已初始化$scope.post = '';为字符串。但这应该是$scope.post = {};一个对象。

var mainApp = angular.module('app', []);
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http) {

  $scope.post = {};
  $scope.postCreated = false;

  $scope.makeNewPost = function() {
    console.log($scope.post.title);
    $http.post('/api/post', {
        title: $scope.post.title,
      })
      .then(function(res) {
        $scope.postCreated = true;
        //extra code not related to the form itself...
      });
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app='app' ng-controller='newPostController'>
  <form ng-submit="makeNewPost()">
    <div class="form-group">
      <label for="title" class="control-label">Title</label>
      <input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
    </div>
    <input type="submit" value="Submit">
  </form>
</div>