По крайней мере один элемент управления FormGourp действителен для включения отправки формы

У меня есть два элемента управления в моей FormGroup. Мне нужно проверить хотя бы один из двух элементов управления, чтобы сделать возможной отправку формы.

Мне нужно, чтобы formGroup действителен, если действителен только один FormControl

this.form = this.fb.group({
        'keyWord' : new FormControl(null, [
          Validators.required,
          Validators.minLength(4)
        ]),
        'name':  new FormControl(null, [
          Validators.required
 ])

      });

HTML

 <form [formGroup]="form" (ngSubmit)="isPending=!isPending;searchCriteria(form.value);" class="form-group" novalidate>
        <small class="text-danger" *ngIf="?????">At Least One Field is required</small>
        <div class="input-group box-shadow">
            <div class="input-group-addon border-top-0 border-left-0 border-bottom-0 rounded-0">
                <i class="fa fa-search"></i>
            </div>
            <input type="text" formControlName="keyWord" placeholder="" class="form-control border-0">
            <input type="text" formControlName="name" placeholder="" class="form-control border-0">
            <button type="submit" value="submit">
      </form>

angular forms formgroups form-control
person YK mar    schedule 25.01.2018    source источник
comment
означает, что this.form действителен? или включить кнопку отправки?   -  person Shailesh Ladumor    schedule 25.01.2018
comment
да кнопка включить   -  person YK mar    schedule 25.01.2018
comment
Это немного противоречит валидаторам. Оба требуются, но ваш случай говорит, что любой из них в порядке.   -  person mgamsjager    schedule 25.01.2018

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать это

<form [formGroup]="form" (ngSubmit)="isPending=!isPending;searchCriteria(form.value);" class="form-group" novalidate>
            <small class="text-danger" *ngIf="?????">At Least One Field is required</small>
            <div class="input-group box-shadow">
                <div class="input-group-addon border-top-0 border-left-0 border-bottom-0 rounded-0">
                    <i class="fa fa-search"></i>
                </div>
                <input type="text" formControlName="keyWord" placeholder="" class="form-control border-0">
                <input type="text" formControlName="name" placeholder="" class="form-control border-0">
                <button type="submit" value="submit" [disabled]="isvalid()">
          </form>

функция компонента

  isValid(): boolean {
         if(this.form.get('keyWord').valid ||this.form.get('name').valid){
            retrun false;
         }
      return true;
    }
person Shailesh Ladumor    schedule 25.01.2018
comment
isValid вызывается в форме изменений? каждые изменения! - person YK mar; 25.01.2018
comment
isValid вызывается синхронно. поэтому, если ваша форма изменилась, и оба элемента управления недействительны. кнопка отключить - person Shailesh Ladumor; 25.01.2018

arrow_upward
1
arrow_downward

Сделать отключенное свойство кнопки отправки функцией валидности формы

<button type="submit" value="submit" [disabled]="(!form.get('keyWord').valid) && (!form.get('name').valid) ">

Во-первых, мы получаем доступ к определенному элементу управления формой, используя <form name>.get('<member name>')

Затем мы используем логическую логику следующим образом. Все сначала будет недопустимым, поэтому disabled будет true, потому что, когда они недействительны, valid равен 0, и мы инвертируем его до 1. поэтому 1 || 1 = 1, если один из них действителен, тогда действителен 1, а !valid равен 0, поэтому мы получаем 0 || 1 = 0, а остальные игнорируем.

person Iancovici    schedule 25.01.2018
comment
спасибо за ваш ответ, но form.valid проверьте, действительны ли мои два элемента управления, но мне нужно, чтобы только одно поле было действительным для моей формы. - person YK mar; 25.01.2018
comment
хотя бы один элемент управления не все элементы управления формой - person Shailesh Ladumor; 25.01.2018