Angular 填充所有字段后按钮仍未启用？

因为我是新手，正在尝试建立反馈表。一切正常，但填写完所有字段后，“发送消息”按钮未启用。我已经试过很多次了，但是我犯了一些错误，我不明白。即使我尝试在表单中只使用全名字段，但同样的错误仍在发生。请帮我解决这个小问题

  <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>

---

表单组中有必需的

地址
表单控件，但模板中没有地址输入字段

因此用户不可能输入任何地址

因此，您的表单始终无效。
1）正如我所见，您已声明地址作为表单的一部分，这也是必需的，但在您的模板中，您未使用地址，因此您的表单无效

2） 还有一件事，我可以在你的组件文件中看到，你已经将email定义为一个单独的formcontrol字段，我认为你需要将它与其他formfield一起移动，比如message
地址等

3） 只是为了调试，如果你检查

 {{feedbackFormGroup.value | json}}

在模板文件中，您将获得

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

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

检查下面的链接


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