Angular2 : 편집 페이지에서 모델 값이 변경된 경우 저장 버튼을 활성화하는 방법

Question

새로운 2 각도입니다. 고객 프로파일에 대한 세부 정보를 수정할 수있는 페이지가 있습니다. 의 속성이 변경된 경우 저장 버튼을 사용하는 방법. 나는 $ watch를 사용하여 angular1에서 가능하다는 것을 안다.

Answer 1

마지막으로이 문제를 해결했습니다.

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

Answer 2

아래처럼 사용할 옵션을 사용할 수 있습니다 :

<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 3

및 숨기기를 들어 해당 속성이 비어 있는지 확인 여부 및 반환 할 수 있습니다 버튼을 사용하여 라인 지시문에서 * ngIf를 사용할 수 있습니다.

Answer 4

이것은 나를 위해 일했습니다. pls try. 구성 요소

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) 
    } 
} 

희망에서 당신의 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> 

이 당신이 필요합니다.

Answer 5

간단합니다. dirty@angular/forms을 사용하는 경우 양식을 확인하십시오. 폼 데이터가 변경되었는지 여부를 확인하기 위해

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

양식을

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을 생성합니다. heroForm 안의 컨트롤이 변경되면 true으로 설정됩니다.

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

당신이 그것을 위해 폼 컨트롤 유효성 검사를 사용할 수있는 추가 정보를

Answer 6

에 대한 angular docs을 참조하십시오. HTML 템플릿이 같은 어떤 일이 :

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

경우 :

<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 파일이 같은

버튼이 활성화 될 것입니다 저장

[disabled]="!form1.valid" 

유효

용감한.