angular - Angular 6 mat-对话框验证

Question

我正在尝试对 angular 6 mat-dialog 进行验证，以便在单击 mat-dialog 选项时收到错误消息。如果该项目没有在 mat-dialog 选项验证生成。如何做到这一点？我尝试了很多，但没有得到输出。帮我解决这个问题。

我的代码如下

getError() {
this.stringData='Please provide a valid carrier id';
return this.stringData;}filter(val: any): any[] {
console.log(this.editFormData.controls['carrierID'].value);
let valid;
this.prepaidCarrierTripId.map(x => {
  if (x.trpCarrierId.startsWith(this.editFormData.controls['carrierID'].value)) {
    valid = true;
  }
})
if (!valid) {
  this.getError();
   }
else
  this.error = null;
return this.prepaidCarrierTripId.filter(option =>
  option.trpCarrierId.toLowerCase().includes(val.toLowerCase()));}

我的 html

    <input matInput type="text" name="carrierID" (click)="load()" formControlName="carrierID"
      placeholder="{{ 'Carrier ID'}}" maxlength="6" [matAutocomplete]="auto">


    <mat-error class="error-msg" [value]="getError()">{{getError()}}</mat-error>  
     <mat-error class="error-msg">CarrierId is required</mat-error>     

    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="selected($event)">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.trpCarrierId">{{option.trpCarrierId}}</mat-option>
    </mat-autocomplete>

  </mat-form-field>

标签： angularangular6

Answer 1

    <--create code in Html  for Component.html-->
    <-- Important for Create for Component.ts file 
 export class in only create    user: any={}   -->  
    <div class="container">
          <form class="form" id="custForm" name="custForm" #custForm='ngForm'>
          <div class="form-body">      
              <h3 class="box-title m-t-40">Registration</h3>      
              <hr>
              <div class="row"> 
                  <div class="col-md-4">
                      <div class="form-group">
                          <label>Name</label>
         <input type="text" class="form-control"  required  placeholder="Name" name='name' #name='ngModel' [(ngModel)]="user.Name">
             <div [hidden]="name.valid || name.pristine" class="text-danger">
                <div [hidden]="!name.hasError('required')">Name is required</div>                 
                     </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" class="form-control" required pattern="^\w+([\.-]? 
                 \w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="Email Id" id="email" 
                 name='email'#email='ngModel' [(ngModel)]="user.Email"> 
                         <div [hidden]="email.valid || email.pristine" class="text-danger">
                          <div [hidden]="!email.hasError('required')">Email is required</div>
                          <div [hidden]="!email.hasError ('pattern')">Email format should be
                              <small><b>[e-mail]</b></small>
                          </div>
                      </div>
                      </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                      <label>Mobile</label>
                        <input type="text" #Contact="ngModel" required pattern="^[789]\d{9}$" id="Contact" name='Contact' minlength=10 maxlength=10
                              [(ngModel)]="user.Contact" class="form-control">
                            <div [hidden]="Contact.valid || Contact.pristine " class="text-danger">
                              <div [hidden]="!Contact.hasError('required')">Mobile Number is required</div>
                              <div [hidden]="!Contact.hasError('pattern')">Enter valid Mobile Number
                                <small>
                                  <b>ex.7735676743</b>
                                </small>
                              </div>
                            </div>

                      </div>
                </div>
              </div>
              <div class="row"> 
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" class="form-control"  required  placeholder="Username" name='Username' #Username='ngModel' [(ngModel)]="user.Username">
                        <div [hidden]="Username.valid || Username.pristine"
                        class="text-danger">
                        <div [hidden]="!Username.hasError('required')">Username is required</div>

                   </div>
                      </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control"  required  placeholder="Password" name='Password' #Password='ngModel' [(ngModel)]="user.Password">
                        <div [hidden]="Password.valid || Password.pristine"
                        class="text-danger">
                        <div [hidden]="!Password.hasError('required')">Password is required</div>

                   </div>
                      </div>
                </div>
              <div class="col-md-4">
                  <div class="form-group">
                      <label>Country</label>             
                      <select class="form-control" id="Country" name='Country' #Country='ngModel' [(ngModel)]="user.Country">
                        <option value=" " selected>Select</option>
                        <option value="India">India</option>
                        <option value="America">America</option>
                        <option value="Chaina">Chaina</option>

                      </select>
                    </div>
              </div>
            </div>

          <div class="form-actions">
              <button type="submit" [disabled]="!custForm.valid" class="btn btn-success" (click)="recordSave()"> <i class="fa fa-check"></i> Save</button>
              <button type="button" class="btn btn-default">Cancel</button>
          </div>

          </div>
        </form></div>