Question

如果两个字段都没有输入，则两者都是可选的。如果输入了名字，则根据需要设置姓氏。如果姓氏已输入但姓氏无输入，则将姓氏设置为必需。

如果一个字段具有值而另一个字段没有值，则根据需要设置其他字段。谢谢。

所以这就像我是用户，并且有两个字段，分别是名字和姓氏。如果我在名字上输入数据但姓氏为空，则根据需要设置姓氏（反之亦然）。任何想法？谢谢

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>

TS代码

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
  });
});

Answer 1

{
  "type" : "record",
  "name" : "Order",
  "fields" : [ {
    "name" : "id",
    "type" : "string"
  }, {
    "name" : "status",
    "type" : "string"
  }, {
    "name" : "timestamp",
    "type" : "string"
  }, {
    "name" : "comment",
    "type" :  ["null","string"],
    "default": null
  }, {
    "name" : "error",
    "type" : [{"type": "record", "fields":[{"name": "code", "type":"string"}, {"name": "msg", "type":"string"}]}, {"type": "record", "fields":[]}]
  
  } ]
}

如何以角度形式实施有条件的必需验证？

1 个答案: