Question

我有一个输入字段，并在组件中添加了按钮。

首先禁用按钮，当用户输入有效的格式URL时，按钮变为活动状态，然后将此域添加到db，刷新表（位于另一个组件中）。我想实现这一点，在单击按钮后，它会使输入字段为空（就像打开页面一样刷新）

我的组件模板是

<form #addDomainForm="ngForm" (ngSubmit)="addClicked()">
  <mat-card class="topia-box-shadow">

    <mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayoutGap="16px">

      <div>
        <p>Enter domain name or copy and paste the full link to add its domain
          to white list</p>

        <mat-form-field>
          <mat-label>Enter link here</mat-label>
          <input type="url" matInput [(ngModel)]="domainName" #url="ngModel"
                 [class.is-invalid]="url.invalid && url.touched"
                 name="url" [pattern]="urlValidationRegexPattern" required>
        </mat-form-field>
        <mat-error *ngIf="url.invalid && (url.dirty || url.touched)">
          Please enter the link in correct format
        </mat-error>
      </div>

    </mat-card-content>

    <button type="button" id="search" class="topia-btn topia-primary-btn action-buttons"
            [disabled]="!addDomainForm.valid" (click)="addClicked()">Add
      Domain
    </button>
  </mat-card>
</form>

我对该组件的ts文件：

export class DomainWhiteListingAddComponent implements OnInit {

  @Output()
  domainAdded = new EventEmitter<true>();
  domainName: string;
  public urlValidationRegexPattern = /^((((https?)(:\/\/))?((www)\.)?)?|mailto:(\w+\.?\w+)\@)([a-z0-9]+\.[a-z0-9]+)+((\/([\w#]+|[\w#]+(([.\w#])*(-\w+|=\w+|\?\w+=\w+(&\w+=(\w)+)*)?)+)+))*$/;

  constructor(private globalSettingService: GlobalSettingsService, private dialog: MatDialog) {
  }

  ngOnInit() {
  }

  addClicked() {
    const newDomainModel = {
      id: null, domain: this.domainName, disabled: false
    } as Domain;
    this.globalSettingService.addDomainToList(newDomainModel)
      .subscribe((data: Domain) => {
        this.domainAdded.emit(true);
      }, (error: HttpErrorResponse) => {
        this.showErrorDialog(error.error);
      });
  }
}

此代码有效，但是在单击按钮并添加元素后，输入框的值仍保持在该位置。如果我将单个行代码添加到.ts文件 addClicked（）方法

this.domainName = null;

这一次，输入字段根据需要变为空，但显示为无效，因此显示错误。我只希望它像默认打开页面一样默认。喜欢

但是它显示为：我怎样才能做到这一点？（如果需要，我还可以添加父组件代码和其他组件代码）

或者如果需要的话；我该如何重置该组件？

Answer 1

您将ngModel域名设为null，因此会引发错误。像this.domainName = ''

一样更改

Answer 2

将ngModel设置为原始值（空或null）。您还应该设置表单asPristine。

如果您使用的是模板驱动的表单，并且组件中包含以下内容：@ViewChild('myForm') myform: any;

您可以在表单的form属性上使用markAsPristine()函数。就是this.myform.form.markAsPristine()。

Answer 3

怎么样

@ViewChild(addDomainForm) formDirective: FormGroupDirective;

addClicked() {
 this.formDirective.resetForm();
}

它将在检查表单是否为dirty

时重置您的表单

Answer 4

在您的HTML中，您使用url.invalid && url.touched添加无效的红色类，或者尝试以下操作：

[class.is-invalid]="url.invalid && url.dirty"

通过这种方式，直到值实际更改后，它才被标记为无效。

在Angular中单击按钮后如何更改输入值并使之有效

4 个答案: