Как проверить шаблонно-управляемую форму без модельно-ориентированного подхода.

Question

Я пытаюсь проверить управляемую шаблоном форму в Angular без двухсторонней привязки данных.Я сделал проверку с использованием [(ngModel)], но когда я пытаюсь проверить форму без МОДЕЛЬ , я получаю следующую ошибку

Невозможно прочитать свойство 'invalid' undefined

Это мой HTML-код.

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <h3>Angular 6 Template-Driven Form Validation</h3>
        <form name="form" (ngSubmit)="onSubmit(f.value)" #f="ngForm" novalidate>
          <div class="form-group">
            <label for="username">Username:</label>
            <input type="text"
                   class="form-control"
                   name="username"
                   #userName
                   required
                   minlength="8"/>
            <div *ngIf="f.form.controls.username.invalid && f.form.controls.username.touched" class="invalid-feedback">
              <div *ngIf="f.form.controls.username.errors.required" class="alert alert-danger">Username is required</div>
              <div *ngIf="f.form.controls.username.minlength" class="alert alert-danger">length should b 8 character</div>
            </div>
          </div>
     <button class="btn btn-primary" >Register</button>
        </form>
      </div>
    </div>
  </div>
</div>

Он также не отправляет данные компоненту, когда я нажимаю кнопку.

это компонент TS file.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html',
  styleUrls: ['./template-driven-form.component.css']
})
export class TemplateDrivenFormComponent  {

  // model: any = {};

  onSubmit(f) {
    // alert('SUCCESS!! :-)\n\n' + f);
    console.log(f);
  }
}

Answer 1

Это не работает, потому что не должно.

Как вы можете видеть , входные данные, которые не связаны с ngModel, не являются частью вашей формы.

Поэтому просто используйте ngModel, и вы должныхорошо идти

Answer 2

Просто замените:

f.form.controls.username.invalid

на

username.invalid

, но обязательно используйте ngModel

, поэтому ваш HTML-элемент управления:

<input type="text" ngModel class="form-control" name="username" #username="ngModel" required minlength="8"/>