检查 ngmodel 或表单是否脏了或有输入

Question

如何在 angular ngmodel 或表单不干净或使用表单字段输入但未使用表单组的情况下签入。

我想检查 5 个输入字段是否有值或脏我想像消息一样显示但是我们如何检查例如来自 DealFields 或 ngModel dealDispositionFormFields 的 5 个字段是否脏或有输入？谢谢。

#tscode

    class DealDispositionFormFields {
      dealName:string;
      summary:string;
      dealDispositionType: string;
      terminationPayment:number;
      effectiveDate: string;
      totalBrokerCommission: number;
      effectiveDateString: string;
      dealId: number;
}
    
    @Component({
      selector: 'app-deal-idle-disposition',
      templateUrl: './deal-idle-disposition.component.html',
      styleUrls: ['./deal-idle-disposition.component.css']
    })
    export class DealIdleDispositionComponent implements OnInit {
           
             ngOnInit(): void {   
                this.dealDispositionFormFields = new DealDispositionFormFields();
              }
        
        checkIf5FieldsAreDirty() {
        ...
        }

#html代码

<div id="deal-form-container" *ngIf="isEditing">
        <div id="deal-form-wizard-top" *ngIf="dealDispositionFormFields.dealDispositionType === 'Buyout'">
          <mat-form-field appearance="fill">
            <mat-label>Deal Name</mat-label>
            <input 
              matInput
              [(ngModel)]="dealDispositionFormFields.dealName"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Summary of Deal</mat-label>
            <textarea 
              matInput
              class="resize-none"
              [(ngModel)]="dealDispositionFormFields.summary"
              [rows]="5"
              [required]="isExistingDeal">
            </textarea>
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Termination Payment</mat-label>
            <input 
              matInput
              (keyup) = "computeBuyout()"
              mask="separator.0" 
              thousandSeparator=","
              [allowNegativeNumbers]="false"
              [(ngModel)]="dealDispositionFormFields.terminationPayment"
              [required]="isExistingDeal">
              <span matPrefix *ngIf="dealDispositionFormFields.terminationPayment">$</span>
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Effective Date</mat-label>
              <input matInput
                (dateChange)="computeBuyout()"
                [matDatepicker]="effectiveDate" 
                [(ngModel)]="dealDispositionFormFields.effectiveDate"
                [required]="isExistingDeal">
              <mat-datepicker-toggle matSuffix [for]="effectiveDate"></mat-datepicker-toggle>
              <mat-datepicker #effectiveDate></mat-datepicker>
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Total Broker Commission</mat-label>
            <input 
              matInput
              (keyup) = "computeBuyout()"         
              mask="separator.0" 
              thousandSeparator=","
              [allowNegativeNumbers]="false"
              [(ngModel)]="dealDispositionFormFields.totalBrokerCommission"
              [required]="isExistingDeal">
              <span matPrefix *ngIf="dealDispositionFormFields.totalBrokerCommission">$</span>
          </mat-form-field>
        </div>
      </div>

Answer 1

ngModel 有 dirty property as mentioned in this

您可以做的是在每个输入上使用 change 或 ngModelChange 事件

例如在你的代码中它会像

HTML

<mat-form-field appearance="fill">
            <mat-label>Deal Name</mat-label>
            <input 
              matInput
              [(ngModel)]="dealDispositionFormFields.dealName"
              [required]="isExistingDeal"
              (change)="checkIfDirty()">
</mat-form-field>

TS

   checkIfDirty() {
    let countDirtyValues = 0;
    Object.values(this.dealDispositionFormFields).map(value => {
      if (value) {
        countDirtyValues += 1;
      }
    });
    if (countDirtyValues >= 5) {
      // do something here
    }
  }

或者如果您想找到其他解决方案。 ngmodel 实际上是 formControl 的一个实例，在那种情况下，我会选择创建一个响应式表单，如 formControl here 的 angular 文档中所述，这也可以完成不需要 formGroup

Answer 2

您应该使用 angular 的 Reactive Forms。它具有您可以 want/need 用于表单验证的所有功能，而且更易于使用。

这里是使用响应式表单的官方指南：https://angular.io/guide/reactive-forms

在您的组件中，您可以创建一个带有如下控件的 FormGroup：

@Component({
      selector: 'app-deal-idle-disposition',
      templateUrl: './deal-idle-disposition.component.html',
      styleUrls: ['./deal-idle-disposition.component.css']
})
export MyComponent implements OnInit {
  myForm: FormGroup;
  constructor() {
    // create the form
    this.myForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      age: new FormControl(0, [Validators.required, Validators.min(18)])
    });
  }
}

根据 API 文档 (https://angular.io/api/forms/FormControl)，FormControl class 扩展了 AbstractControl，它具有 dirty 标志 field/property .您可以像这样检查控件的状态：

const nameControl = this.myForm.get('name'); // or this.myForm.controls['name'];
if (nameControl.dirty) {
  // ...
}

并且可以监听控件值的变化，类似于ngModel:

nameControl.valueChanges.subscribe((newValue) => {
  // ...
});

也可以监听控件的状态变化，类似ngModel:

nameControl.statusChanges.subscribe((newStatus) => {
  // ...
});

查看官方指南和 API 文档； Angular 在记录他们的框架方面做得很好。

检查 ngmodel 或表单是否脏了或有输入

check in if ngmodel or forms are dirty or has input

typescript

angular-material

angular