角2反应形式详细验证

当使用Angular2模板驱动的形式，我们可以使用#firstName="ngModel"，然后验证逻辑，我们可以使用firsName这样<div class="alert alert-danger" *ngIf="firstName.errors.minlength">角2反应形式详细验证

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

<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] 
     }); 
    }

来源

2016-09-27 RBasniak

您可以在组件定义一个变量背后认为'FormControl' –

@HarryNinh语法是什么？我尝试了'＃variable =“formControl”'但我得到这个错误'没有指令将“exportAs”设置为“formControl”（“ type =”text“ class =”form-control“ [ERROR - > ]＃control =“formControl” [formControl] =“form.controls ['username']”> – RBasniak

你在哪里定义了你的'form'？ –

您可以在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>

来源

2016-09-27 13:44:54

谢谢你的链接，这个方法好多了，正在努力转换我的代码现在... – RBasniak

角2反应形式详细验证

回答

相关问题