У меня есть поле ввода, которое требуется, только если установлено другое значение. Другое значение выбрано. Обратите внимание, моя фактическая форма намного сложнее, но вот пример, показывающий части, которые имеют отношение к этому вопросу:

шаблон:

<form name="createPaymentForm" (ngSubmit)="f.form.valid && createPayment()" #f="ngForm" novalidate>

  <select name="orderNumberType" #orderNumberType="ngModel" 
    [(ngModel)]="payment.orderNumberType">
    <option [ngValue]="undefined" disabled>Select</option>
    <option *ngFor="let opt of paymentIdOptions" [value]="opt.id">{{opt.label}}</option>
  </select>

  <div [ngClass]="{ 'has-error': f.submitted && !orderNumber.valid }">
    <input type="text" name="orderNumber"
      [(ngModel)]="payment.orderNumber" #orderNumber="ngModel">
  </div>

</form>

компонент:

import { Component, OnInit } from '@angular/core';
import { PaymentsService } from '../../../services/payments.service';
import { Payment } from '../../../models';

@Component({
  selector: 'app-new-payment',
  templateUrl: './new-payment.component.html',
  styleUrls: ['./new-payment.component.scss']
})
export class NewPaymentComponent implements OnInit {
  paymentIdOptions: any = [];
  payment: Payment = {};

  constructor( private paymentsService: PaymentsService ) { }

  ngOnInit() {
    this.paymentsService.getOrderNumberTypes().subscribe(orderNumberTypes => {
      this.paymentIdOptions = orderNumberTypes;
    });
  }

  createPayment() {
    console.log(this.payment);
    //do something...
  }
}

Моя цель - требовать только orderNumber, если для orderNumberType установлено любое значение, кроме undefined. Как проще всего это реализовать?

(Примечание, угловой 5)

6
Dallas Caley 14 Фев 2018 в 01:58
Я бы сказал, что самый простой способ - использовать вместо этого реактивные формы, поскольку возможность добавлять / удалять валидацию во время выполнения является одним из его преимуществ. Однако без этого можно добавить два поля ввода, каждое с ngIf, и показывать только одно с обязательным атрибутом, если установлено другое значение.
 – 
DeborahK
14 Фев 2018 в 02:17
Хм, похоже, что это могло бы сработать (две коробки с ngif), но по какой-то причине мне это кажется неправильным. И конечно, я мог бы использовать реактивные формы, но последние несколько дней я просто потратил, пытаясь осмыслить формы, управляемые шаблонами. Я надеюсь, что формы на основе шаблонов могут иметь те же функциональные возможности, что и реактивные, иначе зачем людям, работающим с angular, предлагать вам неполное решение?
 – 
Dallas Caley
14 Фев 2018 в 02:36
На основе шаблонов - простые и легкие ... формы, которые просто нуждаются в проверке. Реактивные формы предназначены для всего, что выходит за рамки простого. И нет ... они несовместимы по функциям. Иначе зачем предлагать два подхода. РЖУ НЕ МОГУ. :-)
 – 
DeborahK
14 Фев 2018 в 02:38
Нет, не знаю, не знаю, что такое множественное число, но мне очень трудно учиться по видео (если это так), и в моих учебных пособиях почти всегда отсутствует какая-то важная информация из моего опыта. Если я не могу найти книгу О'Рейли по этой теме, я бы просто предположил, что научусь методом проб и ошибок.
 – 
Dallas Caley
14 Фев 2018 в 02:41
1
Caley [required] нужно только логическое значение, поэтому укажите [required] = "payment.orderNumberType", если ваши идентификаторы не могут быть (undefined, null, 0, false или пустая строка). Если вам нужно только проверить, если undefined [required] = "payment.orderNumberType === undefined".
 – 
Gilsdav
14 Фев 2018 в 03:15

1 ответ

Лучший ответ

Это можно сделать с помощью обязательной директивы Angular , например [required]="payment.orderNumberType" (здесь он проверяет, является ли payment.orderNumberType неопределенным, нулевым, 0, ложным или пустой строкой). Это сокращение от [attr.required]="payment.orderNumberType ? true : undefined".

У вас проблема с [ngClass] = "{'has-error': f.submitted &&! OrderNumber.valid}", потому что действительный будет установлен во время "ngAfterViewChecked", поэтому Angular не хочет снова выполнять задание. Замена его на [class.has-error]="f.submitted && !orderNumber.valid" больше не заставит его плакать.

14
Gilsdav 14 Фев 2018 в 03:36
Я сделал текстовое поле необходимым условно следующим образом, надеюсь, это кому-то поможет. Из раскрывающегося списка в зависимости от выбранной опции. onMLSChange (mlsId: строка) {если (mlsId === 'MLS_Not_Listed') {this.hideAgentId = true; } else {this.hideAgentId = false; }} В OnInit я сделал this.hideAgentId = false; Я сделал div как скрытый, используя, [hidden] = "! HideAgentId", и сделал поле требуемым, используя [required] = "hideAgentId"
 – 
Ananth Asamani
12 Мар 2020 в 18:29