Question

我正在尝试将来自数据库的值与我在角度2模型驱动表单上输入的值进行比较。我想在值不相等时显示div。我正在尝试下面的逻辑，但我无法使其工作。将不胜感激。

查看

<form [formGroup]="reguserform" #f="ngForm" (ngSubmit)="register()">
<fieldset>
    <div class="form-group">
        <label for="Username">Username</label>
        <input class="form-control"
               [(ngModel)]="user.Username"
               type="text" id="Username"
               formControlName="Username" />
    </div>
    <div class="alert alert-danger"
         *ngIf="reguserform.controls.Username.touched && reguserform.controls.Username.errors">
        <div *ngIf="reguserform.controls.Username.errors.required"
             class="alert alert-danger">
            Please enter a valid Username...
        </div>
        <div *ngFor="let r of rusers">
            <div *ngIf="r.Username == user.Username" class="alert alert-danger">Username is taken</div>
        </div>
    </div>
</fieldset>

组件

getUsers() {
    this.authenticationService.getRegUser().subscribe(
        res => this.rusers = res
    );
}

从数据库结束时一切都很好，对象也在控制台中登录，但在比较时没有显示div。

Answer 1

你的想法一般，但*ngIf="reguserform.controls.Username.touched && reguserform.controls.Username.errors"不正确！

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
        <form [formGroup]="reguserform" #f="ngForm" (ngSubmit)="register()">
          <fieldset>
            <div class="form-group">
              <label for="Username">Username</label>
              <input class="form-control"
                     [(ngModel)]="user.Username"
                     type="text" id="Username"
                     formControlName="Username" />
            </div>
            <div class="alert alert-danger">
              <div *ngFor="let r of rusers">
                  <div *ngIf="r.Username == user.Username" class="alert alert-danger">Username is taken</div>
              </div>
            </div>
          </fieldset>
        </form>
    </div>
  `,
})
export class App {
  public reguserform: FormGroup; // our model driven form

  user = {};
  rusers = [
    { Username: 'mxii' },
    { Username: 'test' },
    { Username: 'peter' }
  ];

  constructor(private _fb: FormBuilder) {
    this.name = 'Angular2'
  }

  ngOnInit() {
    this.reguserform = this._fb.group({
      Username: ['', [<any>Validators.required, <any>Validators.minLength(1)]]
    });
  }
}

查看我的live-demo：https://plnkr.co/edit/SnHfoAL2dnuwKkrFYGzE?p=preview

Answer 2

当你写res => this.rusers = res时，我猜你把http响应放在变量中。它不是可迭代的对象。也许你需要写这个：

getUsers() {
    this.rusers = this.authenticationService.getRegUser().map(
        res => res.json() 
    );
}

使用* ngFor在<div>中进行值比较

2 个答案: