Angular7模板驱动验证将NgModel导出到变量中，返回未定义的结果

我试图建立一个简单的模板驱动的表单验证，在输入文件中输入

#password=“ngModel”

，当我阅读

password.length时，我得到了
未定义的
，我不明白为什么

我的角形是：

<form #f="ngForm">
  <input class="form-control" placeholder='a' type="text" name="password" id="password" [(ngModel)]="renewPasswordData.password"
    #password="ngModel">

  {{password.length == null}} //<-- returns true
  <button [disabled]="password.length == 0" class="btn btn-success btn-block"> //<-- it not works
    {{"changePassword.change" | translate}}
  </button>
</form>

我的模块导入

imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],

stackblitz:
如果您需要验证长度，请尝试下面的代码，只需设置密码minlength和maxlength

 <input type="text" #password="ngModel" name="password" [(ngModel)]="renewPasswordData.password" minlength="2" maxlength="5"/>
  <div *ngIf="password.invalid"> 
    Invalid Password
  </div>


无效密码
我们需要记住，您已将
密码
注册为
表单控件
。因此，您的实际值在
password.value
中，这就是您需要检查的内容

因此，在按钮上检查您的状况，如：

<button [disabled]="password.value?.length === 0">
  send
</button>


发送

尝试使用password.value。length@Shohel无法读取nullAngular安全导航运算符的属性“length”问题，您是否可以使用
renewPasswordData.password.length
共享您的完整代码以slackblitztry？它会起作用。@Shohel这是一个包含大量代码的大型项目，这个组件实际上只有我展示的表单和代码，其余的是commentedIt works，但是，我在哪里注册了作为表单控件的密码？我想访问诸如password.errors之类的属性，但我不能这样做，css类“form control”是用于引导（css），当您将标记为
name=“password”
的表单标记与ngModel一起放入表单时，您就可以访问
password.errors
了。
 <input type="text" #password="ngModel" name="password" [(ngModel)]="renewPasswordData.password" minlength="2" maxlength="5"/>
  <div *ngIf="password.invalid"> 
    Invalid Password
  </div>

<button [disabled]="password.value?.length === 0">
  send
</button>