Question

我正在尝试创建简单的联系方式，而不是幻想。正如标题中所说的，而不是标签中的值，验证器代码的输出很奇怪。不知道为什么，我正在使用标签和占位符，并且输入的事件没有被覆盖。当我从窗体控件中删除验证器时，一切正常。

export class BookComponent implements OnInit {

  contactForm: FormGroup;

  requestTypes = ['Services', 'Other']

  constructor() {
    this.contactForm = this.createFormGroup();
  }

  ngOnInit() {
  }

  createFormGroup() {
    return new FormGroup({
      fullName: new FormControl([
        Validators.required,
        Validators.pattern("^([a-zA-Z'-.]+ [a-zA-Z'-.]+)$")]),
      email: new FormControl([
        Validators.required]),
      serviceType: new FormControl([
        Validators.required])
    })
  }

  onSubmit() {
    const result = this.contactForm.value;
    console.log(result)
  }

}

<form class="form" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
          <div class="form__group">
            <input
              type="text"
              id="name"
              class="form__input"
              placeholder="Full Name"
              required
              formControlName="fullName"
            />
            <label for="name" class="form__label">Full Name</label>
          </div>
          <div class="form__group">
            <input
              type="email"
              id="email"
              class="form__input"
              placeholder="Email"
              required
              formControlName="email"
            />
            <label for="email" class="form__label">Email</label>
          </div>

          <div class="form__group u-margin-bottom-medium">
            <div class="form__radio-group" *ngFor="let reqType of requestTypes">
              <input
                type="radio"
                class="form__radio-input"
                id="small"
                formControlName="serviceType"
              />
              <label for="small" class="form__radio-label">
                <span class="form__radio-button"></span>
                {{ reqType }}</label
              >
            </div>
          </div>

          <div class="form__group">
            <button
              type="submit"
              class="btn btn--green"
              [disabled]="contactForm.pristine"
            >
              Send request
            </button>
          </div>
        </form>

那是为什么？当我从FormControls中删除Validators时，一切正常。它是这样的：

对此有任何提示吗？先感谢您。

Answer 1

可以通过尝试类似的方法来修复is。

fullName: new FormControl('',[
        Validators.required,
        Validators.pattern("^([a-zA-Z'-.]+ [a-zA-Z'-.]+)$")]),

在新的FormControl中，第一个参数作为值而不是验证器，因此您将遇到这个问题。如果出现下拉菜单，您可以这样尝试。

 fullName: new FormControl([],[
            Validators.required,
            Validators.pattern("^([a-zA-Z'-.]+ [a-zA-Z'-.]+)$")]),

输入占位符中显示的表单验证器

1 个答案: