【求助】angular typescript中component与html之间的数据传递

Question

要做一个输入用户id和密码的登录页面，点击登录按钮，进入菜单页面。
从来没用过Angular，从网上一点点找类似的代码，大致拼出下面的内容：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';

// 登录画面
import { LoginComponent } from './login/login.component';

// 菜单画面
import { MenuComponent } from './menu/menu.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    LoginComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// 这里定义一个登录用的类
export class LoginModel {
  constructor(
    public companyCd: string,
    public companyPw: string,
    public message?: string) {
  }
}

<login.component.html>
<div>
  <div align="center">
    <p>请输入企业ID和密码：</p>
  </div>
  <div align="center">
    <form #f="ngForm" (ngSubmit)="onSubmit()">
      <table>
        <tr>
          <td><label for="companyCd">企业ID：</label></td>
          <td>
            <input id="companyCd" name="companyCd" type="text" 
                   [(ngModel)]="company.companyCd" #companyCd="ngModel">
          </td>
        </tr>
        <tr>
          <td><label for="companyPw">密码：</label></td>
          <td>
            <input id="companyPw" name="companyPw" type="text" 
                   [(ngModel)]="company.companyPw" #companyPw="ngModel">
          </td>
        </tr>
      </table>
      <button type="submit" class="btn btn-primary" routerLink="/menu">登录</button>
      <br />
      <span style="color:red;font-weight:bold">
        {{model.message}}
      </span>
    </form>
    {{ f.value | json }}
  </div>
</div>
<router-outlet></router-outlet>

<login.component.ts>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginModel } from '../app.module';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})

export class LoginComponent {

  model = new LoginModel('', '', '');

  constructor(private router: Router) { }

  onSubmit() {

    var companyCd = (document.getElementsByName('companyCd')[0] as HTMLInputElement).value
    var companyPw = (document.getElementsByName('companyPw')[0] as HTMLInputElement).value

    if (companyCd == '' || companyPw == '') {
      this.model.message = '企业ID或密码不能为空';
    } else if (!(companyCd == 'aaaa' && companyPw == 'bbbb')) {
      // 应该是连接数据库进行判定的，目前还没进展到那一步
            company.message = '企业ID或密码输入有误';
    } else {
      this.router.navigate(['menu']);
    }
  }
}

问题一：
不是很理解ngModel的双向绑定，在上面代码的前提下运行，F12显示TypeError: Unable to get property 'companyCd' of undefined or null reference。

问题二：关于html中输入的企业ID和密码，现在只能用getElementsByName来获取，但感觉应该还有利用ngModel的方法。

问题三：上面代码的前提下运行，不输入企业ID和密码，点击登录按钮，不显示错误信息{{model.message}}。如果把 [(ngModel)]="company.companyCd"里的company换成model， [(ngModel)]="model.companyCd"，在登录按钮下面就会一直显示{companyCd:"", companyPw:""}。怎么才能让Message只在输入错误的情况下显示？