小编Que*_*ns 的帖子

角度反应形式,添加和删除字段?

虽然在角度5中构建crud应用程序我遇到了一个问题,我如何使用相同的表单生成器但是根据我的需要更改我得到的控件,通过表单添加或更新用户...

这里有一些简单的代码,我会尽量不使事情变得复杂,因为我有很多属性很大的形式......

所以在我的app.component.html我有表格

         <form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
          (ngSubmit)="save()"> 
                <div class="form-group">
                    <label for="firstName" class="control-label 
                  required">First name</label>
                    <input type="text" id="firstName" class="form-control" 
             formControlName="firstName">


                </div>

                <div class="form-group">
                    <label for="lastName" class="control-label 
            required">Last name</label>
                    <input type="text" id="lastName" class="form-control" 
            formControlName="lastName"> 
                </div>
Run Code Online (Sandbox Code Playgroud)

在我的app.component.ts中

在我的构造函数中我有

    this.form = this.formBuilder.group({ 
        firstName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],
        lastName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],

    });
Run Code Online (Sandbox Code Playgroud)

和save()函数用于提交表单

    save() {
    let formModel = this.form.value;
    formModel.id = this.Id;

    if (this.Id == null) { 
        this._usermanagementservice.addEmployee(formModel).subscribe(() => {

           //function that reloads table with employees
            this.LoadAllEmployees();
        });
    }
    else {
        this._usermanagementservice.updateEmployee(this.Id, …
Run Code Online (Sandbox Code Playgroud)

angular angular-reactive-forms

4
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×1

angular-reactive-forms ×1