Html 当必填字段为空时，“提交”按钮是否有效？

我有一个有20个字段的表单。其中有10个必填字段。当我单击submit按钮时，表单仅显示必填输入字段的红色边框，不显示错误消息。而且提交也可以工作并命中服务器

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>

徽标*

锦标赛类型*
挑选
{{TT.name}
锦标赛名称*
比赛开始日期*
比赛结束日期*

我想要的结果是： 当我点击提交按钮时，当必填字段为空时，它将不起作用。同时，必填输入字段显示错误消息“请填写此必填字段”，输入字段的红色边框。

您需要输入一些类似（*）

（*）您还可以制作一个组件

@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) { }

@组件({
选择器：“应用程序错误”，
模板：`
`
})
导出类错误组件{
@输入（'controlName'）controlName:string；
@输入（'error'）错误：字符串
控件：FormControl
可见：布尔=假；
获取isInvalid（）{
const control=this.form.form.get（this.controlName）；
返回control.toucted&&control.invalid&&
（this.error？control.errors[this.error]：true）；
}
构造函数（@Optional（）@Host（）私有形式：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>

需要徽标。
需要电子邮件。
电子邮件无效。

比赛结束日期*
请填写此必填字段

你能给我看一下html吗？我添加了我的html代码。请检查你应该添加html代码，包括表单标签，包括提交按钮。这样其他人会理解你是如何声明整个表单的。添加所有必填/可选字段在这里没有任何用处。First div代码工作正常。它显示错误消息。但在我提交后l所需字段错误消息未消失。

@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>

<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>