Angular7 模板驱动的验证将 NgModel 导出到变量 returns undefined

Question

我正在尝试建立一个简单的模板驱动的表单验证，在输入文件中使用 #password="ngModel"，当我阅读 password.length 时，我得到 undefined 但我不明白为什么

我的 angular 表格是：

<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>

ts文件：

import { Router } from '@angular/router';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { RenewPassword } from 'src/app/models/others/RenewPassword';

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.css']
})
export class ChangePasswordComponent implements OnInit {

  renewPasswordData = new RenewPassword("12", "");
  constructor(private router: Router) {
    console.log(this.renewPasswordData.password.length) //<-- return 2 (correct)
  }

  ngOnInit() {
  }

}

型号：

export class RenewPassword {
    constructor(
        public password: String,
        public rePassword: string
    ) {
    }
}

我的 ngModule 导入

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

堆栈闪电战：https://stackblitz.com/edit/angular-uzjqdq

Answer 1

如果您需要长度进行验证，请尝试以下代码，只需设置密码最小长度和最大长度

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

Answer 2

我们需要记住，您已将 password 注册为 form control。所以你的实际值在 password.value 里面，所以这就是你需要检查的内容。

所以请检查您在按钮上的状态，例如：

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

StackBlitz

Angular7 模板驱动的验证将 NgModel 导出到变量 returns undefined

Angular7 Template driven validation exports NgModel into a variable returns undefined

angular

angular7