Как реализовать условную обязательную проверку в угловых формах?

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

Установите другое поле по мере необходимости, если в одном поле есть значение, а в другом нет. Спасибо.

Так что это похоже на то, что я пользователь, и есть два поля: имя и фамилия. Если я ввожу данные по имени, но фамилия пуста, тогда установите фамилию по мере необходимости (наоборот). Любая идея ? Благодарность

HTML

<div fxLayout="row" fxLayoutGap="24px" formGroupName="person">
  <div fxFlex fxLayout="row">
    <mat-form-field appearance="outline" class="pr-4" fxFlex>
      <mat-label>Firsname</mat-label>
      <input matInput #firstname formControlName="firstname" trim  required/>
      <button type="button" mat-button   *ngIf="firstname.value"  matSuffix mat-icon-button aria-label="Clear"
      (click)="clearFieldFirstname()">
      <mat-icon>close</mat-icon>
    </button>
    </mat-form-field>
  </div>
  <div fxFlex fxLayout="row">
    <mat-form-field appearance="outline" class="pr-4" fxFlex>
      <mat-label>Lastname</mat-label>
      <input matInput #lastname formControlName="lastname" trim required/>
      <button type="button" mat-button   *ngIf="lastname.value"  matSuffix mat-icon-button aria-label="Clear"
      (click)="clearFieldLastname()">
      <mat-icon>close</mat-icon>
    </button>
    </mat-form-field>
  </div>
</div>

КОД ТС

const personGroup = this.formBuilder.group({
  firstName: [person.firstName, Validators.required],
  lastName: [person.lastName, Validators.required],
});

const formGroup = this.formBuilder.group({
  person: personGroup,
});

this.person.get("firstname").valueChanges.subscribe(value => {
  const lastName = this.person.get("lastname");
  lastName.clearValidators();
  if (value && !lastName.value) {
    lastName.setValidators(Validators.required);
  }
  lastName.updateValueAndValidity({
    emitEvent: false
  });
});

this.person.get("lastname").valueChanges.subscribe(value => {
  const firstName = this.person.get("firstname");
  if (value && !firstName.value) {
    firstName.setValidators(Validators.required);
  } else {
    firstName.clearValidators();
  }
  firstName.updateValueAndValidity({
    emitEvent: false
  });
});

person Community    schedule 07.07.2020    source источник
comment
В чем проблема с этим кодом, который вы предоставили?   -  person Gopal Zadafiya    schedule 07.07.2020
comment
это не работает   -  person    schedule 07.07.2020
comment
Прежде всего, удалите [Validators.required] из 2-й и 3-й строк, так как вы хотите, чтобы оба поля были необязательными по умолчанию.   -  person Gopal Zadafiya    schedule 07.07.2020
comment
@GopalZadafiya тоже не работает, сэр   -  person    schedule 07.07.2020


Ответы (1)


person    schedule
comment
Предоставленный вами стек-блиц-код @MarkLatin работает, как и ожидалось, верно? - person Sivakumar Tadisetti; 07.07.2020
comment
@SivakumarTadisetti, я тоже за чистую реализацию, я не уверен в своем stackblitz - person ; 07.07.2020
comment
@Марк, откуда взялась эта formGroup, сэр? - person ; 07.07.2020