Angular2：如果在编辑页面上更改了任何模型值，如何启用保存按钮

Question

我是 Angular 2 的新手。我有一个页面，我们可以在其中编辑客户资料的详细信息。如果 的任何属性已更改，如何启用保存按钮。我知道使用 $watch 可以在 angular1 中使用。

Answer 1

这很简单。 dirty 如果您使用的是@angular/forms，请检查您的表单。

创建表单

export class HeroDetailComponent4 {
  heroForm: FormGroup;
  states = states;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.heroForm = this.fb.group({
      name: ['', Validators.required ],
      street: '',
      city: '',
      state: '',
      zip: '',
      power: '',
      sidekick: ''
    });
  }
}

HTML：

    <h2>Hero Detail</h2>
    <h3><i>A FormGroup with multiple FormControls</i></h3>
    <form [formGroup]="heroForm" novalidate>
<button (click)="submit()" [disabled]="!heroForm.dirty" type="button">Submit</button>
      <div class="form-group">
        <label class="center-block">Name:
          <input class="form-control" formControlName="name">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Street:
          <input class="form-control" formControlName="street">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">City:
          <input class="form-control" formControlName="city">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">State:
          <select class="form-control" formControlName="state">
              <option *ngFor="let state of states" [value]="state">{{state}}</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Zip Code:
          <input class="form-control" formControlName="zip">
        </label>
      </div>
      <div class="form-group radio">
        <h4>Super power:</h4>
        <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
        <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
        <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
      </div>
      <div class="checkbox">
        <label class="center-block">
          <input type="checkbox" formControlName="sidekick">I have a sidekick.
        </label>
      </div>
    </form>

使用heroForm.dirty检查表单数据是否改变。如果heroForm 中的任何控件已更改，它将设置为true。

<button (click)="submit()" [disabled]="!heroForm.dirty" type="button">Submit</button>

更多信息请参考angular docs

Answer 2

您可以对其使用表单控件验证。 html模板中的一些类似的东西：

 <form fxLayout="column" [formGroup]="form">
          <mat-form-field class="mb-1">
            <input matInput [(ngModel)]="userProfileChangeModel.firstName" placeholder="نام"
                   [formControl]="form1.controls['fname']">
            <small *ngIf="form1.controls['fname'].hasError('required') && form1.controls['fname'].touched"
                   class="mat-text-warn">لطفا نام را وارد نمایید.
            </small>
            <small *ngIf="form1.controls['fname'].hasError('minlength') && form1.controls['fname'].touched"
                   class="mat-text-warn">نام باید حداقل 2 کاراکتر باشد.
            </small>
            <small *ngIf="form1.controls['fname'].hasError('pattern') && form1.controls['fname'].touched"
                   class="mat-text-warn">لطفا از حروف فارسی استفاده نمائید.
            </small>

          </mat-form-field>
           <mat-card-actions>
            <button mat-raised-button (click)="editUser()" color="primary" [disabled]="!form1.valid" type="submit">
              ذخیره
            </button>
          </mat-card-actions>
        </form>

在 ts 文件中像这样：

    this.form = this.bf.group({
  fname: [null, Validators.compose([
    Validators.required,
    Validators.minLength(2),
    Validators.maxLength(20),
    Validators.pattern('^[\u0600-\u06FF, \u0590-\u05FF]*$')])],
});

如果：

[disabled]="!form1.valid"

有效的保存按钮将处于活动状态

问候。

Answer 3

您可以使用如下所示的禁用选项：

  <button [disabled]="isInvalid()" type="button" (click) = "searchClick()" class="button is-info">
          <span class="icon is-small">
            <i class="fa fa-search" aria-hidden="true"></i>
          </span>
          <span>Search</span>
     </button>

您可以在 ts 文件中创建 isInvalid() 并检查该属性是否为空并返回该布尔值

Answer 4

对于隐藏状态的按钮，您可以使用 *ngIf in line 指令。

Answer 5

这对我有用，请尝试。 在您的 html 中，

<input type="text" [ngModel]="name" (ngModelChange)="changeVal()" >
<input type="text" [ngModel]="address" (ngModelChange)="changeVal()" >
<input type="text" [ngModel]="postcode" (ngModelChange)="changeVal()" >

<button [disabled]="noChangeYet" (click)="clicked()" >
  <span>SUBMIT</span>
</button>

在你的组件中

export class customer implements OnInit { 
  name: string; 
  address: string; 
  postcode: string;
  noChangeYet:boolean = true;

  constructor() {} 

  changeVal(){ // triggers on change of any field(s)
    this.noChangeYet = false;
  }

  clicked(){
    // your function data after click (if any)
  } 
}

希望这是你需要的。

Answer 6

我终于解决了这个问题。

import { Component, Input, Output, OnInit, AfterViewInit, EventEmitter, ViewChild } from '@angular/core';

@Component({
  selector: 'subscribe-modification',
  templateUrl: './subscribe.component.html'
})

export class SampleModifyComponent implements OnInit, AfterViewInit {
disableSaveSampleButton: boolean = true;
@ViewChild('sampleModifyForm') sampleForm;

ngAfterViewInit() {
    setTimeout(() => {
            this.sampleForm.control.valueChanges.subscribe(values => this.enableSaveSampleButton());
    }, 1000);
}

enableSaveSampleButton() {
    console.log('change');
    this.disableSaveSampleButton = false;
   }
}



HTML
<button id="btnSave" class="btn btn-primary" (click)="save()" />