Если оба поля не имеют входных данных, оба могут быть необязательными. Если имя введено, установите фамилию по мере необходимости. Если для фамилии введено значение, а для имени нет, установите имя как обязательное.
Установите другое поле по мере необходимости, если в одном поле есть значение, а в другом нет. Спасибо.
Так что это похоже на то, что я пользователь, и есть два поля: имя и фамилия. Если я ввожу данные по имени, но фамилия пуста, тогда установите фамилию по мере необходимости (наоборот). Любая идея ? Благодарность
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
});
});