각도 형식(반응성이 아님)의 데이터가 변경되었는지 감지

각도 형식(반응성이 아님)의 데이터가 변경되었는지 감지

Angular 형태(반응형이 아님)를 가지고 있으며, 데이터 바인딩 모델:

 <form #form="ngForm">
  <input [(ngModel)]="user.name">
  <input [(ngModel)]="user.color">

  <button type="submit">Save</button>
 </form>

바인딩된 데이터가 변경되지 않은 경우 제출 버튼을 비활성화하려면 어떻게 해야 합니까?

양식이 더티인지 여부를 알려주는 더티 플래그를 확인할 수 있습니다.

<button type="submit" [disabled]="!form.dirty">Save</button>

양식에서 값을 변경하면 양식이 더러워집니다.

자세한 내용은 여기를 참조하십시오. https://angular.io/guide/forms

당신의 댓글에 따르면 '하지만 입력에서 기호 1개를 지우고 다시 쓰면 어떨까요? (값은 같지만 형태가 바뀌었습니다.)'저는 이 해결책을 제안합니다.

일반적인 아이디어는 양식의 초기 값을 별도의 개체로 저장하는 것입니다(단, 복제).그런 다음 키 값을 반복하고 업데이트된 데이터를 초기 데이터와 비교하는 부울 함수를 만듭니다.그런 다음 이 기능의 결과를 제출 단추에 바인딩합니다.[disabled]="yourCheckMethod(form.value)".

다음과 같은 기본 속성으로 사용해 볼 수 있습니다.

<button type="submit" [disabled]="form.pristine">Save</button>

이 속성은 폼이 로드된 후 변경되었는지 확인합니다.

클릭하면 버튼이 비활성화되지 않고 처리되지만, 여기서 질문한 내용에 맞게 양식이 없는 상황이 있었습니다.Angular 7(TypeScript 포함):

    <!-- user.component.html -->
    .....
    .....
    <div>
      <input [(ngModel)]="user.name">
      <input [(ngModel)]="user.color">
      <button (click)="save()">Save</button>
    </div>
  
    // user.component.ts
    .....
    .....
    lastObjectHash: string;
    User: user = { name: "joe", color: "blue"};  // with name and color on type User 
    
    // Not really a hash, but let's call it that
    getObjectHash(): Promise<string> {
      return util.encodeBase64(JSON.stringify(this.user));
    }

    ngAfterViewInit(): void {
      this.getObjectHash().then(value => this.lastObjectHash = value);
    }

    save() {
      this.getObjectHash().then(value => { 
        if (this.lastObjectHash === value) {
          alert("You did not change name or color");
          return;
        }
        // Save user changes....
        this.userService.save(this.user);  // Or whatever...
      }); 
    }

    // util.ts
    // Just a utility function to BASE64 encode
    .....
    .....
    export const encodeBase64 = async (textString) => {
      return btoa(textString);
    };

언급URL : https://stackoverflow.com/questions/50386974/detect-if-data-in-an-angular-form-not-reactive-was-changed