Question

我正在创建用户个人资料组件，我希望用户能够更新自己的个人资料。我想要做的是，应该禁用该按钮，直到用户更改其个人资料中的内容。问题是即使用户更改了他的个人资料，该按钮也不会显示。

感谢您的帮助！

userprofile.component.html

<form (ngSubmit)="onSubmit(userProfileForm)"
      #userProfileForm="ngForm"
      fxFlexFill [fxLayout]="'row'"
      fxLayoutAlign="center start">
<div class="col-sm-6">
      <div class="card">
        <div class="card-header">
          <strong>Company</strong>
          <small>Form</small>
        </div>
        <div class="card-block">
          <div class="form-group">
            <label for="company">{{user.profile.displayName}}</label>
            <input type="text" id="company"
                  fxFlex="100"
                  required
                  minlength="3"
                  placeholder="Username"
                  [(ngModel)]="user.profile.username"
                  name="username"
                  #username="ngModel">
          </div>
          <div class="form-group">
            <label for="vat">VAT</label>
            <input type="text" id="vat"
              fxFlex="100"
               minlength="3"
               placeholder="Display Name"
               [(ngModel)]="user.profile.displayName"
               name="displayName"
               #displayName="ngModel">
          </div>
          <div class="form-group">
            <label for="street">Street</label>
            <input type="text" id="street" placeholder="Enter street name">
          </div>
          <div class="row">
            <div class="form-group col-sm-8">
              <label for="city">City</label>
              <input type="text" id="city" placeholder="Enter your city">
            </div>
            <div class="form-group col-sm-4">
              <label for="postal-code">Postal Code</label>
              <input type="text" id="postal-code" placeholder="Postal Code">
            </div>
          </div><!--/.row-->
          <div class="form-group">
            <label for="country">Country</label>
            <input type="text" id="country" placeholder="Country name">
          </div>
          <button type="submit"
              [disabled]="!userProfileForm.form.valid || !profileIsChanged()">
      </button>
        </div>
      </div>

userprofile.component.ts

import {Component, OnInit, ViewChild, OnDestroy} from '@angular/core';
import {UserService} from "../pages/users/user.service";
import {User} from "../pages/users/user";
import {Profile} from "../pages/users/profile";
import {AuthService} from "../pages/login/auth.service";
import {MdSnackBar} from "@angular/material";
import {Observable, Subscription} from "rxjs";

@Component({
  selector: 'app-userprofile',
  templateUrl: './userprofile.component.html',
  styleUrls: ['./userprofile.component.scss']
})
export class UserprofileComponent implements OnInit, OnDestroy {

   initialProfile: Profile;
  user: User;

  error: string;
  private sub: any;

  constructor(private userService: UserService,
    private auth: AuthService,
    public updateValidationBar: MdSnackBar) { }

  ngOnInit() {
    let sub = this.auth.currentUser().subscribe(user => {
      this.user = user;
      this.cloneInitial(this.user.profile);
    });
    this.user = new User();
    this.user.profile = new Profile();
    this.cloneInitial(this.user.profile);
  }



  cloneInitial(profile : Profile){
    this.initialProfile = Object.assign(new Profile(), profile);
  }

  onSubmit(userProfileForm){
    if(userProfileForm.form.valid){
      let sub = this.userService.updateUserProfile(this.user)
        .subscribe(user => {
          this.updateValidationBar.open("Your profile is update", "Ok", {
            duration: 3000
          });
          this.cloneInitial(user.profile);
        },
        err => {
          this.error = err.message;
        },
        () => {
         ;
        });
    }
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
    }


  profileIsChanged(){
    return this.user.profile.displayName !== this.initialProfile.displayName
      || this.user.profile.username !== this.initialProfile.username
      || this.user.profile.email !== this.initialProfile.email;
  }
}

EDIT！我是个白痴。我没有把任何内容放在按钮中！谢谢你的帮助！

Answer 1

[disabled]="!userProfileForm.form.valid || !profileIsChanged()"来 [disabled]="!userProfileForm.valid || !profileIsChanged()" +在标签之间添加值

作品？

Answer 2

请使用

[disabled]="!userProfileForm.dirty"

请在您的HTML中提供结束标记。

如果您想使用电子邮件，请将电子邮件包含在表单内的字段中并包含ngModel属性。

按钮没有显示在Angular 4中

2 个答案: