Question

使用Angular2模板驱动表单时，我们可以使用#firstName="ngModel"，然后在验证逻辑上，我们可以像firsName一样使用<div class="alert alert-danger" *ngIf="firstName.errors.minlength">

我正在尝试类似但有反应形式的东西。以下代码正在运行，但它太冗长且容易出错：

<input id="username"
        type="text"
        class="form-control"        
        [formControl]="form.controls['username']">    

<div *ngIf="form.controls['username'].touched && form.controls['username'].errors">
    <div class="alert alert-danger" *ngIf="form.controls['username'].hasError('required')">
        Username is required
    </div>

    <div class="alert alert-danger" *ngIf="form.controls['username'].hasError('minlength')">
        Username should have at least {{form.controls['username'].errors.minlength.requiredLength}} characters
    </div>   

    <div class="alert alert-danger" *ngIf="form.controls['username'].hasError('cannotContainSpace')">
        Username should not contain spaces
    </div>
</div>

以上是组件模板的一部分。 form.controls['username']出现在太多地方。有什么方法可以简化这个吗？我尝试声明像#userName='"form.controls['username']"这样的局部变量，但它不起作用。

- 更新 -

组件在其自己的.ts文件中使用FormGroup：

定义

export class TestFormComponent implements OnInit
{
    form: FormGroup;

    constructor(private fb: FormBuilder)
    {

    }

    ngOnInit()
    {
        this.form = this.fb.group({
            'username': ['', 
                         Validators.compose([
                                        Validators.required,
                                        Validators.minLength(3),
                                        UsernameValidators.cannotContainSpace]),
                         UsernameValidators.shouldBeUnique],
            'password': ['', Validators.required]
        });
    }

Answer 1

您可以在ts文件中定义属性以保留FormControl：

usernameFc: FormControl;
//....
ngOnInit()
{
    this.usernameFc= this.fb.control('', 
                     Validators.compose([
                                    Validators.required,
                                    Validators.minLength(3),
                                    UsernameValidators.cannotContainSpace]),
                     UsernameValidators.shouldBeUnique);
    this.form = this.fb.group({
        'username': this.usernameFc,
        'password': ['', Validators.required]
    });
}

然后在您的模板中，使用usernameFc代替form.controls['username']：

<div class="alert alert-danger" *ngIf="usernameFc.hasError('required')">
    Username is required
</div>

但是，由于您对表单控件的所有引用都是为了显示错误，因此我强烈建议您观看this talk。她向我们展示了为这个特定用例自动生成和显示错误的过程。理想情况下，在你有一些样板（可以为所有模型驱动的表格共享）后，你可以得到这样的东西：

<div class="alert alert-danger" *ngIf="formError.required">
    {{formError.required}}
</div>

<div class="alert alert-danger" *ngIf="formError.minlength">
    {{formError.minlength}}
</div>   

<div class="alert alert-danger" *ngIf="formError.cannotContainSpace">
    {{formError.cannotContainSpace}}
</div>

Angular 2反应形式详细验证

1 个答案: