Question

我遇到的问题似乎是由“必需”验证器引起的，该验证器不使用从AngularFire数据库异步更新的表单字段。当我尝试编辑现有用户时，即使“用户名”和“电子邮件”输入都包含现有用户的值，Angular似乎也在考虑每个<input>为空，直到我输入它们为止。我可以看到该行为，因为在我输入每个<input>之前，“提交”按钮被禁用。

这是我的组件

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AngularFireDatabase } from 'angularfire2/database';

import { User } from './user';

@Component({
    selector: 'user-form',
    templateUrl: 'user-form.component.html'
})
export class UserFormComponent {
    key;
    item;
    form: FormGroup;
    user = new User();

    constructor(fb: FormBuilder, private _router: Router, private _route:ActivatedRoute, private db: AngularFireDatabase) {
        this.form = fb.group({
            username: ['', Validators.required],
            email: ['', Validators.required]
        })
    };

    ngOnInit() {
        this._route.params.subscribe(params => {
            this.key = params["key"];
        })

        if (!this.key) {
            this.title = "New User";
        }
        else {
            // This is the path that is followed for editing an existing user
            this.title = "Edit User";
            this.item = this.db.object(this.key).valueChanges();
        }
    }
}

这是我的观点

<form [formGroup]="form" (ngSubmit)="submit()">
    <div class="form-group">
        <label for="username">Username</label>
        <input [(ngModel)]="user.username" type="text" class="form-control" formControlName="username" value={{(item|async)?.name}}>
        <div *ngIf="form.controls.username.touched && !form.controls.username.valid" class="alert alert-danger">
            Username is required
        </div>
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input [(ngModel)]="user.email" type="text" class="form-control" formControlName="email" value={{(item|async)?.email}}>
        <div *ngIf="form.controls.email.touched && !form.controls.email.valid" class="alert alert-danger">
            Email is required
        </div>
    </div>
    <button [disabled]="!form.valid" class="btn btn-primary" type="submit">Submit</button>
</form>

我可以进一步确认Angular将我的<input>视为空，因为如果我选中其中一个字段然后在不输入任何内容的情况下将其标记出来，则会显示显示错误消息的<div>

为什么Angular在编辑现有用户时会认为我的<input>都是空的？因为我使用async管道，是否有不同的处理“必需”验证器的方法？

Answer 1

我确定你的控制台应该充满错误。您不允许在FormGroup中使用ngModel。您可以使用模板驱动的表单（FormsModule）或模型驱动的表单（ReactiveFormsModule），但是您不能在彼此之间使用它们。

删除ngModel和值的东西。要在使用ReactiveFormsModule时设置表单的值，请使用方法setValue()或patchValue()：

this.form.setValue({
    username: 'example',
    email: 'example@gmail.com'
});

或者您可以设置一个FormControl值：

this.form.get('username').setValue('example')

必需的验证程序不使用异步字段

1 个答案: