title: Cannot find value email of undefined -- angular4 and .net core
body: <p>A complete beginner in .net core and angular here; having a few difficulties. I have a registration form with couple of text boxes in it. Trying to write the angular4 code that will get the values provided by user and save them to database. Right now, I have the console error - cannot read value 'email' of undefined
  which looks like it is unable to read value from the input text boxes.</p>
  
  <p>My html block -</p>
  
  <pre><code>    &lt;form #regForm="ngForm" &gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;input class="simple-article" #email type="text" name="email" value="" ([ngModel])="model.email" placeholder="Your email" /&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row" style="margin-top:9px"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;input class="simple-article" type="password" #password value="" ([ngModel])="model.password" name="password" placeholder="Enter password" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;label class="checkbox-entry"&gt;
                  &lt;input type="checkbox" #agree ([ngModel])="model.agree" required name="agree" /&gt;
                  &lt;span&gt;I agree to the &lt;u&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/u&gt;&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;a class="btn-success" (click)="onRegClicked(email.value, password.value, agree.checked)"&gt;
                  Register
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My angular code -</p>
  
  <pre><code>export class RegistrationComponent implements OnInit {
  
      model: { email: 'NONE', password: 'NONE', agree: false };
      validEmail: boolean = true;
      errors: any;
      isRequesting: boolean;
      submitted: boolean = false;
  
      constructor(private router: Router, private cd: ChangeDetectorRef, private confService: ConfigService, private common: CommonFunctionsService, private appService: AppService) { }
  
      ngOnInit() {
  
      }
  
      onRegClicked(email: string, password: string, agree: boolean) {
          if (this.common.hasValue(email) &amp;&amp; this.common.hasValue(password)) {
              if (!agree) {
                  alert('You must agree to register!');
                  return;
              }
              let user = &lt;UserRegistration&gt;{
                  email: email,
                  password: password
              };
  
              this.registerUser({ value: user, valid: true });
  
          }
          else {
              alert('Please fill out all the fields!');
              return;
          }
      }
  
      registerUser({ value, valid }: { value: UserRegistration, valid: boolean }) {
  
          this.validEmail = true;
          this.submitted = true;
          this.isRequesting = true;
          this.errors = '';
  
          if (valid) {
              this.appService.register(value.email, value.password, 0)
                  .take(1)
                  .finally(() =&gt; this.isRequesting = false)
                  .subscribe(
                  (result: any) =&gt; {
                      if (result.success) {
                          //this.appService.Ulogin(value.email, value.password);
                          this.validEmail = true;
                      }
                      else {
                          this.validEmail = false;
                      }
                  },
                  (errors: any) =&gt; this.errors = errors
                  );
  
          }
      }
  }
  </code></pre>
  
  <p>and commonFunctionsService is -</p>
  
  <pre><code>export class CommonFunctionsService {
  
      constructor() { }
  
      hasValue(str: string) {
          return str !== undefined &amp;&amp; str !== null &amp;&amp; str !== '';
      }
  
      copyObjectFromTo(obj1: any, obj2: any) {
          Object.keys(obj1).forEach((key) =&gt; {
              obj2[key] = obj1[key];
          });
      }
  
      trimIfGreaterThan(str: string, maxLength: number) {
          if (str.length &gt; maxLength)
              return str.substring(0, maxLength) + '..';
          else
              return str;
      }
  
      getEmailUserName(email: string) {
          return email.substring(0, email.indexOf('@'));
      }
  
      getUtcNow(): Date {
          var now = new Date();
          return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
      }
  }
  </code></pre>
  
  <p>Where is the error in the above code that I wrote? Initially I had novalidate in the form but I removed that too. Still no luck. onRegClicked is the function that is supposed to pick the values supplied to the text boxes.</p>