Angularによって利用されるオブジェクトがなぜ未定義ですか？

Question

私はAngularにはかなり新しいです。ここに私が取り組んでいるコントローラは...

関連するビューには、ユーザーの電子メールのテキスト入力があります。これは、角度の使用$scope.registrationForm.email.valueをモデルとして設定されています。これは、私が$watchの機能の中からすべてを取り除いたようなもので、単純なコンソールログを行うだけで、テキスト入力の値を変更するたびに記録されます。

ここでの考え方は次のようになり $scope.registrationFormでオブジェクトを持つことである

...

{ 
    email: { 
    value: "someEmail@emailProvider.com", 
    valid: true 
    } 
} 

私はテキストエリアの値を監視しようとしてる

、電子メールを検証するために、サービスメソッドを使用します有効な場合プロパティをregistrationForm.emailに設定してtrueに設定します。

残念ながら、私はエラーを取得しています...

TypeError: Cannot read property 'email' of undefined

私は明示的にJavaScriptのregistrationForm.email.validで定義されていない、また私は私のビューのHTMLで、それへの参照を行っています。

設定する前にこのプロパティを作成する必要がありますか？ここで何が起こっているのですか？

Answer 1

利用可能

<script> 
    angular.module('emailExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.email = { 
     text: 'me@example.com' 
     }; 
    }]); 
</script> 
    <form name="myForm" ng-controller="ExampleController"> 
    <label>Email: 
     <input type="email" name="input" ng-model="email.text" required> 
    </label> 
    <div role="alert"> 
     <span class="error" ng-show="myForm.input.$error.required"> 
     Required!</span> 
     <span class="error" ng-show="myForm.input.$error.email"> 
     Not valid email!</span> 
    </div> 
    <tt>text = {{email.text}}</tt><br/> 
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> 
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> 
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> 
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> 
    <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/> 
    </form> 

詳細ははい、あなたは、設定する前にプロパティを作成する必要があります。

$scope.email={}; 

Answer 2

このようにする必要はありません。なぜなら、角度はすでにそれを作るからです。 必要なものはすべてフォームに属性名を追加して入力することです。 here