При проверке на основе шаблонов Angular7 экспорт NgModel в переменную возвращает неопределенное значение

Question

Я пытаюсь установить простую шаблонную проверку формы с # 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>

Файл 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
  ],

stackblitz: https://stackblitz.com/edit/angular-uzjqdq

Answer 1

Нужно помнить, вы зарегистрировали password как form control.Таким образом, ваше фактическое значение находится внутри password.value, поэтому вам нужно проверить это.

Проверьте ваше состояние на кнопке, например:

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

StackBlitz

Answer 2

, если вам нужна длина для проверки, чем, пожалуйста, попробуйте ниже код, просто установите minlength и maxlength пароля

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