Как получить свойства формы (form.submitted) из FormControl?

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

Если вы хотите использовать отправленное свойство, вы можете использовать директиву 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 для получения отправленного значения от родителя.

Answer 2

Я думаю, что проблема в том, что вы забыли указать type = 'button' в своей отмене

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

В любом случае, если вы используете [control] = "timezone", элемент управления не является FormControl, является NgControl

@Input() control: NgControl;

Вы можете получить доступ к форме, используя

this.control.control.parent

Но в форме

НЕТ свойства, "отправленного"