Блог

Я почти уверен, что это легко сделать, но я нигде не могу найти решение.

У меня есть formGroup вызываемая повестка дня. Все поля являются обязательными и действительными до включения отправки. Я также хочу, чтобы последнее поле было действительным, только если оно равно определенному числу, введенному пользователем (определяемому solution ). Я упростил приведенный ниже код:

 <form (ngSubmit)="submitForm()" [formGroup]="agenda" class="bodytext">
  <ion-input type="text" name="email" formControlName="email" required></ion-input>
  <ion-input type="text" name="userSolution" formControlName="userSolution" required></ion-input>
  <ion-button type="submit" expand="block" [disabled]="agenda.invalid">Submit</ion-button>
</form>
 

тогда в файле ts есть мой конструктор:

 constructor( http: HttpClient, private formBuilder: FormBuilder) {
    this.http = http;
    this.agenda = this.formBuilder.group({
      email: [''],
      userSolution: [''],
    });
  }
 

Я создал рабочий пример в stackblitz, где я предположил, что число равно 20, когда условие истинно. Также вы можете использовать требуемый валидатор при инициализации формы.

Я использовал пользовательский валидатор, который возвращает имя ошибки в качестве ключа и логическое значение true в качестве значения {errorName: true} , если условие не совпадает, и это имя ошибки может использоваться для сообщения об ошибке проверки.

 export class AppComponent implements OnInit {
  agenda: FormGroup;
  solution = 20;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.agenda = this.formBuilder.group({
      email: ["", Validators.required],
      userSolution: ["", [Validators.required, this.myValidator(this.solution)]]
    });
  }

  myValidator(num: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      if (
        control.value !== undefined amp;amp;
        (isNaN(control.value) || control.value != num)
      ) {
        return { notEqual: true };
      }
      return null;
    };
  }

}
 

Форма-

 <form [formGroup]="agenda" class="bodytext">
  <input type="text" name="email" formControlName="email">
  <input type="text" name="userSolution" formControlName="userSolution">
  <button type="submit" expand="block" [disabled]="agenda.invalid">Submit</button>
</form>
 

Демонстрационная ссылка — StackBlitz

Чтобы уточнить, это относится к Angular, а не к Ionic.

Вам нужно создать средство проверки. Самый простой способ — определить функцию и передать ее.

Не зная особенностей ваших требований к проверке, приведенный ниже псевдокод должен помочь вам в этом.

ПРИМЕЧАНИЕ: подпись validateUserSolution, вероятно, изменится в зависимости от ваших требований.

  constructor( http: HttpClient, private formBuilder: FormBuilder) 
 {
  this.http = http;
  this.agenda = this.formBuilder.group({
   email: [''],
   userSolution: ['', Validators.compose(validateUserSolution(this.someValue, this.someOtherValue))],
  });
 }

 validateUserSolution(myInput1: string, myInput2: string): boolean {
 // some logic
 }