Angular 4表单验证，提交按钮不起作用答案

【问题标题】：Angular 4 Form Validation, submit button doesn't workAngular 4表单验证，提交按钮不起作用
【发布时间】：2018-03-09 02:01:01
【问题描述】：

按照本教程：https://github.com/designcourse/reactive-forms-tutorial 并尝试实现一个在 Angular 中验证的表单。

除“提交”按钮外，一切正常。

当您单击“提交”时，它什么也不做。它应该在屏幕上输出为“firstName”、“lastname”和“description”输入的内容。就目前而言，它实际上在控制台或编译器中没有任何错误。

资格验证.component.ts 文件：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-eligibility-validation',
  templateUrl: './eligibility-validation.component.html',
  styleUrls: ['./eligibility-validation.component.css']
})
export class EligibilityValidationComponent {

  rForm: FormGroup;
  post:any;
  description:string = '';
  firstName:string = '';
  lastName:string = '';
  titleAlert:string = 'This field is required';

  constructor(private fb: FormBuilder) {

    this.rForm = fb.group({
      'firstName': [null, Validators.required],
      'lastName': [null, Validators.required],
      'description': [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])],
      'validate' : ''
    });

  }

  ngOnInit() {

    this.rForm.get('validate').valueChanges.subscribe(
      (validate) => {
        if (validate == '1') {
          this.rForm.get('firstName').setValidators([Validators.required, Validators.minLength(3)]);
          this.titleAlert = "You need to specify at least 3 characters";
        } else {
          this.rForm.get('firstName').setValidators(Validators.required);
        }
        this.rForm.get('firstName').updateValueAndValidity();
      }
    )
  }

  addPost(post) {
    this.firstName = post.firstName;
    this.lastName = post.lastName;
    this.description = post.description;
  }

}

资格验证.component.html 文件：

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <!-- Form from tutorial https://github.com/designcourse/reactive-forms-tutorial -->
            <div *ngIf="!name; else forminfo">
                <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)">
                    <h4>Instructions</h4>

                    <p>Complete the following form to validate eligibility. Once received we will contact you to confirm the next steps.</p><br>

                    <label>First Name <input type="text" formControlName="firstName"></label><br>

                    <div class="alert" *ngIf="!rForm.controls['firstName'].valid && rForm.controls['firstName'].touched">{{ titleAlert }}</div><br>

                    <label>Last Name <input type="text" formControlName="lastName"></label><br>

                    <div class="alert" *ngIf="!rForm.controls['lastName'].valid && rForm.controls['lastName'].touched">{{ titleAlert }}</div><br>

                    <label>Description <textarea formControlName="description"></textarea></label><br>

                    <div class="alert alert-warning" *ngIf="!rForm.controls['description'].valid && rForm.controls['description'].touched">You must specify a description that's between 30 and 500 characters.</div><br>

                    <label for="validate">Minimum of 3 Characters</label>

                    <input type="checkbox" name="validate" formControlName="validate" value="1"> On <br>

                    <input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid">
                </form>
            </div>
            <ng-template #forminfo>
                <div class="form-container">
                    <div class="row columns">
                        <h1>{{ firstName }}</h1>
                        <h1>{{ lastName }}</h1>
                        <p>{{ description }}</p>
                    </div>
                </div>
            </ng-template>
            <!-- End Form -->
        </div>
    </div>
</div>

控制台日志和编译器没有错误消息。

【问题讨论】：

定义“不起作用”。你在做什么，你期望会发生什么，会发生什么？
当您单击提交时，它什么也不做。它应该在屏幕上输出为“firstName”、“lastname”和“description”输入的内容。就目前而言，它实际上什么都不做，在控制台或编译器中没有错误。
只有在*ngIf="!name 中使用的表达式!name 是假的时才会显示显示信息的div。您的组件中没有 name 属性，因此它始终为 udefined，因此 !name 始终为 true。
在你的 addPost() 函数中放置一个调试器来检查它是否被调用。如果它没有尝试将input type="submit" 更改为input type="button" 并在按钮上添加点击事件以调用addPost() 函数。即(click)="addPost(rForm.value)"
@JBNizet，谢谢——这很容易解决。

标签： angular

【解决方案1】：

@JBNizet 在 cmets 中是正确的：仅当 *ngIf="!name 中使用的表达式 !name 为 false 时，才会显示显示信息的 div。您的组件中没有 name 属性，因此它始终是 udefined，因此 !name 始终为 true。

【讨论】：

【解决方案2】：

尝试将下面的代码从构造函数移动到 ngInit。

通常构造函数是类级别的，但不是在角度引导周期中。这可能是一个问题，它没有设置。

this.rForm = fb.group({
  'firstName': [null, Validators.required],
  'lastName': [null, Validators.required],
  'description': [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])],
  'validate' : ''
});

【讨论】：