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

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

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

创建表单

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 检查表单数据是否已更改。它将设置为 true heroForm 中的任何控件是否已更改。

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

参考角度文档以获取更多信息

您可以使用表单控件验证。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"

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

韧皮问候。

您可以使用

禁用选项，如下所示：

  <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(( 并检查该属性是否为空并返回该布尔值

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

这对我有用，请尝试。在你的 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)
  } 
}

希望这是你需要的。

最后我解决了这个问题。

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()" />

相关内容

最新更新

热门标签：