在Angular中单击按钮后如何更改输入值并使之生效 [英] How to change input value and make it valid after button clicked in Angular

问题描述

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

I have an input field and add button in a component.

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

Button is disabled at first, when user enters valid format url, button becomes active, then button add this domain to db, refresh table(which is in another component). I want to achieve that, after button is clicked it makes input field empty (refresh like page is just opened)

我的组件模板是

<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文件:

My ts file for that component:

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 code is working but after clicking button and adding the element, input box value still stays there. if i add a single line code to .ts file addClicked() method

this.domainName = null;

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

this time, input field becomes empty as I wanted but it appears as invalid so it shows error. I just want it make as default like the page is opened at beginning. Like

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

But it shows as: How can I do that ? (if it is needed i can add parent component codes and other component code also)

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

Or if it is needed; how can i reset just that component?

推荐答案

如何

@ViewChild(addDomainForm) formDirective: FormGroupDirective;

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

它将在检查表单是否为 dirty

It'll reset your form as you are checking if the form is dirty

这篇关于在Angular中单击按钮后如何更改输入值并使之生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！