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

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 中删除验证器时，一切正常。这是它的样子：

对此有什么提示吗？先感谢您。

Answer 1

可以通过尝试这样的方法来解决这个问题。

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'-.]+)$")]),

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

Form Validators shown in input placeholder

angular

validation

angular-reactive-forms

angular-forms