Проверка формы между несколькими полями ввода

Question

Итак, у меня есть форма с несколькими полями формы ввода и вложенная группа форм. В вложенной группе форм проверка должна быть такой, чтобы при заполнении любого из трех входов форма была действительной. Человек может заполнить либо все, либо даже только один, и форма должна быть действительной. Мой код шаблона выглядит следующим образом:

 <h3 class="form-title">{{title}}</h3>
<form [formGroup]="formX" novalidate>
    <div formGroupName="brandIdentifier">
        <mat-form-field class="full-width">
            <mat-icon matSuffix color="primary" *ngIf="brandName.valid && brandName.touched">done</mat-icon>
            <mat-icon matSuffix color="primary" *ngIf="brandName.invalid && brandName.touched">close</mat-icon>
            <input matInput type="text" placeholder="Brand Name" formControlName="brandName" />
        </mat-form-field>
        <mat-form-field class="full-width">
            <mat-icon matSuffix color="primary" *ngIf="brandId.valid && brandId.touched">done</mat-icon>
            <mat-icon matSuffix color="primary" *ngIf="brandId.invalid && brandId.touched">close</mat-icon>
            <input matInput type="text" placeholder="Brand Id" formControlName="brandId" />
        </mat-form-field>
        <mat-form-field class="full-width">
            <mat-icon matSuffix color="primary" *ngIf="contentId.valid && contentId.touched">done</mat-icon>
            <mat-icon matSuffix color="primary" *ngIf="contentId.invalid && contentId.touched">close</mat-icon>
            <input matInput type="text" placeholder="Content Id" formControlName="contentId" />
        </mat-form-field>
    </div>
    <mat-form-field class="full-width">
        <mat-icon matSuffix color="primary" *ngIf="startTime.valid && startTime.touched">done</mat-icon>
        <mat-icon matSuffix color="primary" *ngIf="startTime.invalid && startTime.touched">close</mat-icon>
        <input matInput type="text" placeholder="Start Time" formControlName="startTime" />
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-icon matSuffix color="primary" *ngIf="endTime.valid && endTime.touched">done</mat-icon>
        <mat-icon matSuffix color="primary" *ngIf="endTime.invalid && endTime.touched">close</mat-icon>
        <input matInput type="text" placeholder="End Time" formControlName="endTime" />
    </mat-form-field>

    <button mat-raised-button color="primary" (click)="startAnalysis()" [ngClass]="{'form-valid':formX.valid, 'form-invalid':formX.invalid}">Submit</button>

    <pre>{{formX.value | json}}</pre>
</form>

Как бы я пошел по этому поводу? использование класса Validator само собой разумеющееся, но я не могу получить его необязательно.

Answer 1

Вы можете использовать собственный валидатор для этого, применить специальный валидатор для вложенной группы, где мы проверяем, что по крайней мере одно из трех полей имеет значение, отличное от пустой строки, поэтому вот пример:

Форма сборки:

this.myForm = this.fb.group({
  nestedGroup: this.fb.group({
    first: [''],
    second: [''],
    third: ['']
    // apply custom validator for the nested group only
  }, {validator: this.myCustomValidator})
});

Пользовательский валидатор:

 myCustomValidator(group: FormGroup) {
   // if true, all fields are empty
   let bool = Object.keys(group.value).every(x => group.value[x] === '')
   if(bool) {
     // return validation error
     return { allEmpty: true}
   }
   // valid
   return null;
 }

Затем в вашей форме вы можете показать сообщение проверки:

<small *ngIf="myForm.hasError('allEmpty','nestedGroup')">
  Please fill at least one field
</small>

Наконец то ДЕМО:)

Answer 2

Пожалуйста, следуйте ниже шагов:

Примечание: мы просто даем представление о том, как вы можете решить вашу проблему.

1. импортировать FormsModule, ReactiveFormsModule в module.ts

   импорт { FormsModule, ReactiveFormsModule } из '@ angular / forms';

   @NgModule ({import: [FormsModule, ReactiveFormsModule]})

2. Изменить ваш HTML, как указано, например,

   Имя пользователя Требуется имя пользователя. Имя пользователя должно быть не менее 4 символов. Пароль Пароль необходим. Пароль должен состоять не менее чем из 6 символов. Забудьте пароль?

                                   <div class="form-group">
                                       <button type="submit" (click)='onSubmit()' dir-btn-click  [disabled]="!loginForm.valid" class="btn btn-inverse btn-block">Sign in</button>
                                   </div>
   
                               </form>
   

3. Измените код, как показано ниже в [yourcomponent].ts, например:

   import {Component} из '@angular/core'; import { FormBuilder, FormGroup, Validators } из '@ angular / forms';

   @Component ({selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']}) класс экспорта LoginComponent {

   loginForm: FormGroup;

   конструктор (приватный fb: FormBuilder) {this.crateLoginForm ()}

   get userName () {return this.loginForm.get ('userName'); } get password () {return this.loginForm.get ('password'); }

   crateLoginForm () {this.loginForm = this.fb.group ({userName: ['', [Validators.required, Validators.minLength (4)]], пароль: ['', [Validators.required, Validators.minLength (6)]]})}

   onSubmit () {let userName = this.loginForm.value.userName; let pwd = this.loginForm.value.password; }

   }