Question

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

一切正常，但是＆＃34;提交＆＃34;按钮。

当您点击＆＃34;提交＆＃34;时，它什么都不做。它应该在屏幕上输出为＆＃34; firstName＆＃34;，＆＃34; lastname＆＃34;输入的内容。和＆＃34;描述。＆＃34;就像现在一样，它在控制台或编译器中没有任何错误，也没有任何作用。

eligibility-validation.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;
  }

}

eligibility-validation.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>

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

Answer 1

@JBNizet在评论中是正确的：只有在!name中使用的表达式*ngIf="!name为false时，才会显示显示信息的div。您的组件中没有name属性，因此它始终是未定义的，因此!name始终为真。

Answer 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' : ''
});

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

2 个答案: