Проверьте, допустимы ли поля, сгенерированные *ngFor, с обязательным флагом

у меня есть этот *ngFor для некоторых полей ввода,

<ng-container *ngFor = "let qp of myQuoted.quoteQuantityPrice; let index = i;">
            <td>
                <input #ng_price[i] = "ngModel" class = "number" type = "number" pattern = "[1-9]*" [(ngModel)] = "qp.price" required>
            </td>
        </ng-container>

и я хочу, чтобы эта кнопка была отключена, если какое-либо из полей #ng_price не соответствует шаблону регулярного выражения, в нем нет данных

для объектов, у которых есть только одно поле ввода, у меня отключена кнопка следующим образом:

 <button [disabled]= "ng_supplier.invalid || ng_inventory.invalid || ng_leadWeeks.invalid || ng_multOrderQty.invalid || ng_minOrderQty.invalid" (click) = "Save()">Save</button>

Я хочу добавить ng_price.invalid в этот список валидаторов Я попытался добавить ng_price.invalid в отключенный блок, но, как я и ожидал, на самом деле это не работает, и сборка проекта завершается неудачей, потому что ng_price.invalid не существует.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
147
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это

HTML

<ng-container *ngFor = "let qp of myQuoted.quoteQuantityPrice; let index = i;">
    <td>
    <form [formGroup] = "formArr[i]">
        <input formControlName = "app_price" class = "number" type = "number">
      </form>
    </td>
 </ng-container>

...

<button [disabled]= "(formArr[i].get('app_price').touched && formArr[i].get('app_price').invalid) || ng_supplier.invalid || ng_inventory.invalid || ng_leadWeeks.invalid || ng_multOrderQty.invalid || ng_minOrderQty.invalid" (click) = "Save()">Save</button>

тс

    formArr: any[] = [];
    pricePattern: any = "[1-9]*" ;

...

  constructor(
    private fb: FormBuilder,
  ) {
        for (let j of this.myQuoted.quoteQuantityPrice) {
          this.formArr.push(
            this.fb.group({
              app_price: ["", [Validators.required, Validators.pattern(this.pricePattern)]],
            })
          );
        }
   }

...

Другие вопросы по теме