Кнопка Отправить работает, когда обязательные поля пусты?

Question

У меня есть форма с 20 полями. В этом есть 10 обязательных полей. Когда я нажимаю кнопку «Отправить», форма показывает только красную рамку для обязательных полей ввода и не отображает сообщение об ошибке. А также работает работает и попал на сервер.

input.submitted.ng-invalid
{
  border:1px solid #f00;
}
form.submitted .ng-invalid
{
border:1px solid #f00;
}
input.ng-touched.ng-invalid {
    border-color:red;
}
   input.ng-touched.ng-valid {
border-color:green;
  } 

this.form = this.formBuilder.group({
      Logo: [null, [Validators.required]], TournamentType: [null, Validators.required],
      TournamentName: [null, Validators.required], TournamentStartDate: [null, [Validators.required]],
      TournamentEndDate: [null, [Validators.required]], StarStatus: [null, [Validators.required]],
      EntryStartDate: [null, [Validators.required]], EntryEndDate: [null, [Validators.required]],
      Venue: [null, [Validators.required]], Address: [null, [Validators.required]],
      enfee: [null, [Validators.required]], PlayersCategory: [null, [Validators.required]],
      latitude: [null, [Validators.required]], longitude: [null, [Validators.required]]
    });

Мой HTML:

                <div class="form-group" [formGroup]="form">
                        <label class="lable label-default">Logo<span style="color: red">*</span></label><br>
                        <img [src]='imageURl' style='width:160px;height:140px;'>
                        <input type="file" id='Logo' formControlName="Logo"  name="Logo"  style="margin-top:10px" accept="image/*"
                        (change)="handleFileInput($event)"
                        [ngClass]="{'form-submitted': formSubmitted}" [(ngModel)]='tourDetails.Logo' required />
                </div>
                <div class="form-group" [formGroup]="form">
                        <label class="label label-default" for="tour-type">Tournament Type<span style="color: red">*</span></label>
                        <select id="TournamentType" formControlName="TournamentType" class="form-control" [(ngModel)]="tourDetails.TournamentType"
                            name='TournamentType'  [ngClass]="{'form-submitted': formSubmitted}"
                             required>
                            <option value='' selected>Select</option>
                            <option *ngFor="let TT of tourType" value={{TT.value}}>{{TT.name}}</option>
                        </select>
                </div>  

                <div class="form-group" [formGroup]="form">
                    <label class="lable label-default">Tournament Name<span style="color: red">*</span></label>
                    <input id="TournamentName" class="form-control" name='TournamentName' formControlName="TournamentName"
                     [(ngModel)]='tourDetails.TournamentName'  [ngClass]="{'form-submitted': formSubmitted}"
                     required />
                </div>

                <div class="form-group inputWithIcon" [formGroup]="form">
                    <label class="lable label-default">Tournament Start Date<span style="color: red">*</span></label>
                    <input class="form-control input-wrapper " bsDatepicker type="text" name='TournamentStartDate'
                        [(ngModel)]="tourDetails.TournamentStartDate" autocomplete='off' [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }"
                        [outsideClick]="true" [maxDate]='tourDetails.TournamentEndDate'
                          formControlName="TournamentStartDate" [ngClass]="{'form-submitted': formSubmitted}" required> 
                </div>

                <div class="form-group inputWithIcon" [formGroup]="form">
                    <label class="lable label-default">Tournament End Date<span style="color: red">*</span></label>
                    <input class="form-control input-wrapper" bsDatepicker type="text" name='TournamentEndDate'
                        [(ngModel)]="tourDetails.TournamentEndDate"  autocomplete='off' [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }"
                        [outsideClick]="true" [minDate]='tourDetails.TournamentStartDate'
                         formControlName="TournamentEndDate" [ngClass]="{'form-submitted': formSubmitted}" required>
                </div>

Результат, который я хочу: Когда я нажимаю кнопку «Отправить», он не будет работать, если обязательные поля пусты. В то же время в обязательных полях ввода отображается сообщение об ошибке «Пожалуйста, заполните это обязательное поле» с красной рамкой полей ввода.

html css angular typescript

-1

user12094695 24 Окт 2019 в 09:21

Answer 1

Вам нужно поставить как (*)

<div *ngIf="form.get('Logo').invalid && form.get('Logo').touched">Required</div>

И в функции отправки

submit()
{
    if (this.form.invalid)
        this.form.markAsUntouched()
    else
    {
         ...the form is valid...
    }
}

(*) Вы также можете сделать компонент

@Component({
  selector: 'app-error',
  template: `
    <small class="form-text text-danger" *ngIf="isInvalid" >
       <ng-content></ng-content>
    </small>
`
})
export class ErrorComponent {

  @Input('controlName') controlName: string;
  @Input('error') error: string

  control: FormControl
  visible: boolean = false;

  get isInvalid() {
    const control = this.form.form.get(this.controlName);
    return control.touched && control.invalid && 
        (this.error ? control.errors[this.error] : true);
  }
  constructor(@Optional() @Host() private form: FormGroupDirective) { }

И использовать как

<app-error controlName="Logo">Logo required.</app-error>

<!---or if you has severals errors-->
<!-- imagine a control email with [Validators.required,Validators.email] -->

<app-error controlName="email" error="required">Email required.</app-error>
<app-error controlName="email" error="email">Email invalid.</app-error>

0

Eliseo 24 Окт 2019 в 06:33

Answer 2

<div class="form-group inputWithIcon" [formGroup]="form">
    <label class="lable label-default">Tournament End Date<span style="color: red">*</span></label>
    <input class="form-control input-wrapper" bsDatepicker type="text" name='TournamentEndDate'
        [(ngModel)]="tourDetails.TournamentEndDate"  autocomplete='off' [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }"
        [outsideClick]="true" [minDate]='tourDetails.TournamentStartDate'
         formControlName="TournamentEndDate" [ngClass]="{'form-submitted': formSubmitted}" required>
    <span *ngIf="form.get('TournamentEndDate').hasError('required')">Please fill this required field
    </span>

    </div>

0

04FS 24 Окт 2019 в 07:58

Кнопка Отправить работает, когда обязательные поля пусты?

2 ответа

Похожие вопросы

Новые вопросы

html