Question

由于我是新手，正在尝试建立反馈表。一切工作正常，但在填写所有字段后，“发送消息”按钮未启用。我已经尝试了很多次，但是我犯了一些错误，但是我没有得到。即使我尝试仅在表单中包含FullName字段，但即使发生相同的错误也是如此。请帮助我解决这个小问题。

  <div class="container"><br>
      <div class="row">
        <div class="col-lg-9 mb-4">
          <h3>Give Us Your Valuable Feedback</h3>
          <form [formGroup]="feedbackFormGroup" novalidate>
            <div class="form-group row">
              <label for="userfullname" class="col-sm-3 col-form-label">FullName</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="userfullname" formControlName="fullname">
              </div>
            </div>
            <div
              *ngIf="feedbackFormGroup.controls['fullname'].invalid && (feedbackFormGroup.controls['fullname'].dirty || feedbackFormGroup.controls['fullname'].touched)"
              class="alert alert-danger">
              <div *ngIf="feedbackFormGroup.controls['fullname'].errors.required">
                Field is <strong>required</strong>.
              </div>
              <div *ngIf="feedbackFormGroup.controls['fullname'].errors.pattern">
                Only <strong>alphabets</strong> allowed.
              </div>
            </div>
            <div class="form-group row">
              <label for="userphonenumber" class="col-sm-3 col-form-label">Mobile Number</label>
              <div class="col-sm-9">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-prefix">+91</span>
                  </div>
                  <input type="tel" class="form-control" id="userphonenumber" formControlName="mobile">
                </div>
              </div>
            </div>
            <div
              *ngIf="feedbackFormGroup.controls['mobile'].invalid && (feedbackFormGroup.controls['mobile'].dirty || feedbackFormGroup.controls['mobile'].touched)"
              class="alert alert-danger">
              <div *ngIf="feedbackFormGroup.controls['mobile'].errors.required">
                Field is <strong>required</strong>.
              </div>
              <div
                *ngIf="!feedbackFormGroup.controls['mobile'].errors.required && feedbackFormGroup.controls['mobile'].errors.minlength || !feedbackFormGroup.controls['mobile'].errors.required && feedbackFormGroup.controls['mobile'].errors.maxlength">
                Please enter 10 digits.
              </div>
              <div *ngIf="feedbackFormGroup.controls['mobile'].errors.pattern">
                <strong>Invalid</strong> mobile number.
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label">Email Address</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="email" [formControl]="email">
              </div>
            </div>
            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">{{getErrorMessage()}}
            </div>
            <div class="form-group row">
              <label for="usermessage" class="col-sm-3 col-form-label">Your Valuable Message</label>
              <div class="col-sm-9">
                <textarea class="form-control" id="usermessage" rows="7" formControlName="message"></textarea>
              </div>
            </div>
            <div
              *ngIf="feedbackFormGroup.controls['message'].invalid && (feedbackFormGroup.controls['message'].dirty || feedbackFormGroup.controls['message'].touched)"
              class="alert alert-danger">
              <div *ngIf="feedbackFormGroup.controls['message'].errors.required">
                Field is <strong>required</strong>.
              </div>
            </div>
            <div class="text-center">
              <button class="btn btn-primary btn-lg" type="submit"
                [disabled]="feedbackFormGroup.pristine || feedbackFormGroup.invalid">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>

我的component.ts文件在此处

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

@Component({
  selector: 'app-feedback',
  templateUrl: './feedback.component.html',
  styleUrls: ['./feedback.component.css']
})
export class FeedbackComponent implements OnInit {

  feedbackFormGroup:FormGroup;

  constructor(private _formBuilder:FormBuilder) { }

  ngOnInit() {

    this.feedbackFormGroup = this._formBuilder.group({
      fullname: ['', [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
      mobile:['',[Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern('[6-9][0-9]*')]],
      address:['',[Validators.required]],
      message:['',[Validators.required]]
    });

  }

  email = new FormControl('', [Validators.required, Validators.email]);
  getErrorMessage() {
    return this.email.hasError('required') ? 'Field is required.' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }

}

Answer 1

您的表单组中有一个必需的address表单控件，但是模板中没有地址输入字段。

因此用户可能无法输入任何地址。

因此您的表格始终无效。

Answer 2

1）正如我所看到的，您已经声明地址是表单的一部分，也是必需的，但是在您的模板中您没有使用地址，因此您的表单无效。

2）还有一件事情，正如我在您的组件文件中看到的那样，您已将电子邮件定义为单独的formcontrol字段，我认为您需要将其与其他formfield一起移动，例如message 地址等

3）仅在调试时检查

 {{feedbackFormGroup.value | json}}

在您的模板文件中，您将获得

{ "fullname": "", "mobile": "", "address": "", "message": "" }

它不包含电子邮件作为表单的一部分

检查下面的链接

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

填写所有字段后，按钮是否仍未启用？

2 个答案: