Блог

Главная - Вопросы по программированию - Angular: принудительная проверка формы, управляемой шаблоном

Angular: принудительная проверка формы, управляемой шаблоном

#angular

#angular

Вопрос:

У меня есть форма, управляемая шаблоном, подобная этой:

 <form #docForm="ngForm">
...
<input type="text"
       required
       [attr.name]="name"
       [(ngModel)]="value" />
</form>

Затем у меня есть кнопка, которая должна проверять, действительна ли форма, даже если все поля формы не затронуты. При нажатии кнопки все недопустимые поля формы должны быть проверены и выделены. Итак, код моего компонента выглядит следующим образом:

 @ViewChild(NgForm, {static: false}) form: NgForm;
...
someButtonHandler() {

     // this.form.controls collection is always empty! 

     for (const fieldName in this.form.controls) { 
         ... do something with form controls 
     }
  }

Я на правильном пути? Почему коллекция this.form.controls всегда пуста?

Может быть, есть какие-то более правильные подходы к решению моей проблемы?

Комментарии:

1. Привет, извините, я не уверен, почему вы используете форму, управляемую шаблоном, разве реактивная форма не была бы лучше? (Я не слишком знаком с шаблонными, поэтому мне, честно говоря, любопытно узнать о ваших рассуждениях :)) Также я думаю, что это немного сложно отлаживать, не могли бы вы случайно создать новый проект angular, содержащий ваш код в stackblitz.com и поделиться им? Если вы это сделаете, я бы с удовольствием поиграл и посмотрел, смогу ли я что-нибудь придумать 🙂

Ответ №1:

если вы хотите, чтобы ваша форма someButtonHandler была введена, вы можете передать ее при вызове функции в вашем html: someButtonHandler(docForm) .

Кроме того, вы также можете получить к ней доступ, если свяжете ее в компоненте с помощью viewchild:

 @ViewChild('docForm') courseForm: NgForm;

someButtonHandler() {

     for (const fieldName in this.courseForm.form.controls) { 
         ... do something with form controls 
     }
}

Ответ №2:

Вы можете использовать класс модели с формой, управляемой шаблоном, это проверит форму при нажатии кнопки.

Например:

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

export class User {
  public name: string;
  public email: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model = new User();

  constructor() { }

  onSubmit(form) {
    console.log(form.value)
  }
}
 
 <div class="container">
  <h4>Template-driven Form</h4>

  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">

    <div *ngIf="model.isName" class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel"
        [ngClass]="{ 'is-invalid': userForm.submitted amp;amp; name.invalid }" required>
      <div class="invalid-feedback" *ngIf="userForm.submitted amp;amp; name.invalid">
        <p *ngIf="name.errors.required">Name is required</p>
      </div>
    </div>

    <div class="form-group">
      <label>Email</label>
      <input type="email" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel"
        [ngClass]="{ 'is-invalid': userForm.submitted amp;amp; email.invalid }" email required>
      <div *ngIf="userForm.submitted amp;amp; email.invalid" class="invalid-feedback">
        <div *ngIf="email.errors.required">Email is required</div>
        <div *ngIf="email.errors.email">Must be a valid email address</div>
      </div>
    </div>

    <div class="form-group">
      {{userForm.valid}}
      <button class="btn btn-danger btn-block">Submit</button>
    </div>
  </form>
</div>