从反应性 angular 表单中删除字段的最佳方法

Question

我不想在更新时从我的反应式 Angular 6 表单发送字段，因为我正在使用的 API 不处理这个 "extra" 更新中的字段。

当我添加我的对象时，这就是我发送的内容：

{"person": {"name":"John", "address": "2050 Bamako Place Washington, DC 20521-2050", "code": " 256222"}

当我更新我的表格时，我想（不再"code"）：

{"person": {"name":"John", "address": "2051 Bamako Place Washington, DC 20521-2051"}

我尝试将 "disable" 用于我的字段，但它仍然提交我不想要的字段。我也试过 readonly 但与上面相同。我不知道实现此目标的最佳方法是什么。

form.html

        <form [formGroup]="testForm" (ngSubmit)="formValidate()" >
            <mat-card-content class="mat-card-content">
                <div fxLayout="row">
                    <div fxLayout="column" fxFlex="100%">

                        <mat-form-field class="form-input"> 
                            <input matInput formControlName="name" required
                            placeholder="Name" /> 
                        </mat-form-field>

                        <mat-form-field class="form-input">
                            <textarea matInput formControlName="address" required
                            placeholder="Address" rows="4" cols="200"></textarea>

                        </mat-form-field>

                        <mat-form-field class="form-input"> 
                            <input matInput formControlName="code" required
                            placeholder="Code" /> 

                        </mat-form-field>

                     </div>
                    </div>
            </mat-card-content>
            <mat-card-footer style="margin:0 auto;">
                <div fxLayout="row" fxLayoutAlign="end center">

                    <button type="submit" color="primary" mat-raised-button [disabled]="testForm.invalid">Submit</button>
                </div>
            </mat-card-footer>
        </form>

form.ts

    this.testForm = fb.group({
        'name': fb.control('', [Validators.required]),
        'address': fb.control('', [Validators.required]),
        'code': fb.control('', [Validators.required]), // I would like to do not send this field when I'm updating my form.
    });


formValidate() {

        this.person = this.testForm.value;
        if (this.updateForm) {
            this.person['id'] = this.currentId;
        }

        console.log(this.person);

       // create or update by sending object to the API
      ...
    }

非常感谢！

Answer 1

试试这个：this.testForm.removeControl('code'); 您还可以创建一个名为 ie 的对象。 request 并将您要发送的值放在那里。

从反应性 angular 表单中删除字段的最佳方法

Best way to remove a field from reactive angular form

angular

angular-reactive-forms