如何从FormControl中获取表单属性(form.committed)？

Question

我已经创建了一个用于显示表单验证错误信息的通用组件。像下面这样。

import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-err-msg',
  template: `<div class="input-error" *ngIf="errorMessage !== null">{{errorMessage}}</div>`,
  styleUrls: ['./err-msg.component.css']
})
export class ErrMsgComponent implements OnInit {

  @Input() control: FormControl;
  @Input() fieldName: FormControl;
  isInvalidMsg = ' is invalid';

  constructor() { }

  get errorMessage() {
    for (const propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return this.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }
    return null;
  }

  getValidatorErrorMessage(validatorName: string, validatorValue?: any) {
    const config = {
      'required': this.fieldName + ' is required',
      'appPhoneValidate': this.fieldName + this.isInvalidMsg,
      'appEmailValidate': this.fieldName + this.isInvalidMsg,
      'appPasswordValidate': this.fieldName + ' must containt 8 characters, capital letters, lowercase, numbers and special character.',
      'minlength': `minnimum length ${validatorValue.requiredLength}`,
      'min': `minumum value ${validatorValue.min}`,
      'max': `maximum value ${validatorValue.max}`,
      'matchPassword': this.fieldName + ' is mismatched',
      'appEqualvalidate': this.fieldName + ' is mismatched',
      'appWebValidate': this.fieldName + this.isInvalidMsg,
      'appTimeCheckValidate': this.fieldName + this.isInvalidMsg,
    };

    return config[validatorName];
  }

  ngOnInit() {
  }

}

我已经使用这个组件作为。

<select
  name="timezone"
  id="timezoneList"
  #timezone="ngModel"
  class="form-control text-black"
  [(ngModel)]="caseDetail.timezoneId"
  required
>
  <option [ngValue]="null" disabled>Select Timezone</option>
  <option [ngValue]="timezone?.id" *ngFor="let timezone of timezoneList">{{ timezone?.timezoneWithOffset }}</option>
</select>
<app-err-msg [control]="timezone" fieldName="Timezone"></app-err-msg>

在这里，我遇到的问题是，当我点击表单中的 "取消 "按钮时，第一次点击会显示验证错误，而当我第二次点击 "取消 "按钮时，表单提交被取消。这是因为我使用了: this.control.touched.

为了解决这个问题，我可以这样做 if(form.submitted === true)但问题是，我如何才能从一个单独的FormControl中获取表单属性，因为我只是传递控件引用，而不是表单引用.有什么办法可以获取控件的父表单的属性吗？

Answer 1

我认为问题在于你忘记了在你的cancel中给type='button'。

<button type='button' (click)="....">Cancel</button>

无论如何，如果你使用[control]="timezone"，控件不是一个FormControl，而是一个NgControl。

@Input() control: NgControl;

您可以通过以下方式访问该表格

this.control.control.parent

但在表单中并没有 "提交 "的属性。

Answer 2

如果你想使用已提交的属性，那么你可以使用的是 NgForm 指令

这里有一个例子。我们有一个组件来保存表单。

@Component({
  selector: "my-app",
  template: `
    <form [formGroup]="fg" (submit)="onSubmit()" #personForm="ngForm">
      <input type="text" formControlName="name" placeholder="name" /> <br />
      <input type="text" formControlName="email" placeholder="email" />
      <form-status
        controlName="email"
        [submitted]="personForm.submitted"
      ></form-status>
      <button>Submit</button>
    </form>
  `
})
export class AppComponent {
  public fg: FormGroup;

  // @ViewChild("personForm", { static: true }) private personForm: NgForm;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.fg = this.fb.group({
      name: [""],
      email: [""]
    });
  }

  public onSubmit() {
    // console.log("submitted", this.personForm.submitted);
  }
}

我们有一个组件来显示表单的状态。

@Component({
  selector: "form-status",
  template: `
    <h2>form submitted: {{ submitted }}</h2>
  `
})
export class FormStatusComponent {
  @Input() public submitted = false;
}

我们使用@Input装饰器从父节点获取提交的值。