Как проверить входные данные по текущему значению переменной (пользовательская функция проверки)? - PullRequest
Новая
       48

Как проверить входные данные по текущему значению переменной (пользовательская функция проверки)?

0 голосов
/ 06 апреля 2020

У меня есть поле ввода в моей форме, и мне нужно подтвердить, что это число не превышает 1 000 000 и не меньше, чем остаток на счете. Я смог установить максимум 1 000 000, но не смог успешно сравнить баланс с входными данными. Я хотел бы, чтобы это привело к красному контуру вокруг поля ввода, аналогично тому, когда оно превышает 1 000 000. Вот мой код:

HTML шаблон 

<mat-form-field appearance = outline class="amount">
  <mat-label>Amount</mat-label>
  <input matInput
    type='number'
    required 
    formControlName="amount">
</mat-form-field>

Компонент 

export class StartComponent implements OnInit {
  currentAccount: ICustomerAccount;
  amountMax = 1000000;
  startForm = new FormGroup({
    amount: new FormControl('', Validators.max(this.amountMax)),
  });
}

1 Ответ

0 голосов
/ 06 апреля 2020

Вам потребуется функция CustomValidator, как описано здесь: https://angular.io/guide/form-validation

@Component({
  selector: 'app-validator-test',
  templateUrl: './validator-test.component.html'
})
export class ValidatorTestComponent implements OnInit {
  public startForm: FormGroup;
  public amountMax = 5000;
  public currentAccount: any = {value: 10};

  constructor(private formBuilder: FormBuilder) {}

  public ngOnInit(): void {
    this.startForm =  this.formBuilder.group({
      amount: ['', [Validators.max(this.amountMax), this.customValidatorFn()]]
    });
  }

  private customValidatorFn(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const valid: boolean = this.currentAccount.value <= control.value;
      return valid ? null : {amountMinError: true};
    };
  }
}

шаблон: 

<form [formGroup]="startForm" *ngIf="startForm">
  <input formControlName="amount" type="number"/>
  <div>valid: {{startForm.get('amount').valid}}</div>
</form>

не забудьте добавить FormsModule и ReactiveFormsModule для импорта модуля: imports: [BrowserModule, FormsModule, ReactiveFormsModule],

...