Динамическая проверка c на основе условий

Question

Сценарий: У меня есть 4 поля формы.

1. Описание (необязательно)
2. Выбор типа (обязательно)
3. Телефон (требуется только в том случае, если для параметра «Тип выбора» установлено значение «Телефон»)
4. Электронная почта (Требуется только в том случае, если для параметра «Выбрать тип» установлено значение «Электронная почта»)

Когда я что-либо изменяю, это поле «Выберите тип», в зависимости от выбора будут отображаться поле «Телефон» или «Адрес электронной почты». Мне нужно проверить эти поля.

Проблема:

Когда форма загрузится, у нее будет только описание, выберите раскрывающийся список типов и нажмите кнопку сохранения.

Шаг 1: Нажмите кнопку «Сохранить», не вводя никакого ввода, при этом должно появиться предупреждение «1023 *» и выберите тип будет красным.

Шаг 2: Выберите тип, следующий вход станет видимым с красной рамкой. Этого не должно быть, так как пользователь не коснулся поля. Как я могу решить эту проблему?

Код:

Код Stackblitz

html

<div class="example-container">
    <form [formGroup]="groupForm" (ngSubmit)="onSubmit()">
        <section>
            <section class="input-row">
                <mat-form-field>
                    <input matInput type="test" placeholder="Description" id="description" formControlName="description"/>
        </mat-form-field>
            </section>
            <section class="input-row">
                <mat-form-field>
                    <mat-select id="sourceType" formControlName="sourceType" placeholder="Select Type*">
                        <mat-option value="phone">Phone</mat-option>
                        <mat-option value="email">Email</mat-option>
                    </mat-select>
                </mat-form-field>
            </section>
            <section *ngIf="typeIsPhone" class="input-row">
                <mat-form-field>
                    <input matInput type="number" placeholder="Phone" id="phoneValue" formControlName="phoneValue"/>
        </mat-form-field>
            </section>
            <section *ngIf="typeIsEmail" class="input-row">
                <mat-form-field>
                    <input matInput type="email" placeholder="Email" id="emailValue" formControlName="emailValue"/>
        </mat-form-field>
            </section>
        </section>
        <button mat-raised-button color="primary" type="submit" class="save">
      Save
    </button>
    </form>
</div> 

компонент:

export class FormFieldOverviewExample implements OnInit {
  typeIsPhone = false;
  typeIsEmail = false;
  public groupForm: FormGroup = new FormGroup({
    description: new FormControl(""),
    sourceType: new FormControl("", [Validators.required]),
    phoneValue: new FormControl("", [Validators.required]),
    emailValue: new FormControl("", [Validators.required])
  });

  constructor() {}

  ngOnInit(): void {
    this.groupForm
      .get("sourceType")
      .valueChanges.subscribe(this.setSourceType.bind(this));
  }

  setSourceType(SourceType: string) {
    this.typeIsPhone = SourceType === "phone";
    this.typeIsEmail = SourceType === "email";
  }

  onSubmit() {
    const sourceTypeFormControl = this.groupForm.get("sourceType");
    const phoneEnteredFormControl = this.groupForm.get("phoneValue");
    const emailEnteredFormControl = this.groupForm.get("emailValue");

    if (sourceTypeFormControl.errors.required) {
      alert("Source Type is required!");
      return;
    } else {
      if (phoneEnteredFormControl.errors.required) {
        alert("Phone is required!");
        return;
      }
      if (emailEnteredFormControl.errors.required) {
        alert("email is required!");
        return;
      }
    }
  }
}

Answer 1

Как будто FormControl отключен, не имеет ошибок, я предлагаю другой подход, использующий disable и enable, который вы можете увидеть в this stackblitz

ngOnInit(): void {
    const control=this.groupForm.get("sourceType")
    if (control)
       control.valueChanges.pipe( //Use startWith to execute at first
             startWith(control.value)
       ).subscribe(res=>this.setSourceType(res)); //<--see how pass the value
  }

  setSourceType(SourceType: string) {
    this.typeIsPhone = SourceType === "phone";
    this.typeIsEmail = SourceType === "email";
    const phoneControl=this.groupForm.get('phoneValue')
    const emailControl=this.groupForm.get('emailValue')
    if (phoneControl) 
      phoneControl[SourceType==='phone'?'enable':'disable']() //(*)
    if (emailControl)
      emailControl[SourceType==='email'?'enable':'disable']()
  }
  //(*) is a abreviated way to say 
  //             if (SourceType=='phone')
  //                phoneControl.enable()
  //             else
  //                phoneControl.disable()

ПРИМЕЧАНИЕ:

  //You can not use 
  if (phoneEnteredFormControl.errors.required) //WRONG
  //use 
  if (phoneEnteredFormControl.errors && phoneEnteredFormControl.errors.required) //OK

Answer 2

Проблема связана с переданным свойством, кнопкой с подразумеваемым типом = submit и способом, по умолчанию ErrorStateMatcher обрабатывает этот case .

Возможно, используйте

type="button" (click)="onSubmit()"