Как установить angular формы логики?

Question

У меня есть структура данных для публикации моего API следующим образом.

{
    name: string,
    price: number,
    allowedMinPirce: number,
    allowedMaxPrice: number
}

Итак, я создал реактивную форму для этой модели.

myForm = this.fb.group({
    name: ['', Validators.required],
    price: ['', Validators.required],
    allowedMinPirce: ['', Validators.required],
    allowedMaxPrice: ['', Validators.required],
});

Поля обязательны для заполнения набор. Но у меня есть некоторые другие логики проверки.

price filed should be bigger than 0,
price filed shloud be between allowedMinPirce and allowedMaxPrice,

Так, где я могу поместить такие логики проверки? (А мне нужно показать оповещения пользователю.)

Answer 1

Попробуйте это ...

myForm = this.fb.group({
    name: ['', Validators.required],
    price: ['', [
                 Validators.required,
                 Validators.min(this.form.value.allowedMinPrice),
                 Validators.max(this.form.value.allowedMaxPrice)
                 ]],
    allowedMinPrice: ['', Validators.required],
    allowedMaxPrice: ['', Validators.required],
});

Для отображения предупреждений

<span *ngIf="myForm.get('price').invalid">Enter a valid price</span>

Answer 2

Не могли бы вы попробовать это?

myForm = this.fb.group({
    name: ['', Validators.required],
    price: ['', [
                  Validators.required,
                  Validators.min(this.form.value.allowedMinPirce), 
                  Validators.max(this.form.value.allowedMaxPrice)
                ]
           ],
    allowedMinPirce: ['', Validators.required],
    allowedMaxPrice: ['', Validators.required],
});

Answer 3

Если вы используете angular материал , вы можете использовать пользовательский класс errorStateMatcher и пользовательскую функцию validator для получения этой функциональности. Как и в моем примере .

Вы можете использовать только функцию validator. Как в этом примере .