angular - 一次性获取响应式表单值

问题描述

我创建了一个Angular项目，用户可以在其中提供输入并验证表单，如下所示：

<form [formGroup]="angForm" novalidate>
    <div class="form-group">
        <label>Name:</label>
        <input class="form-control" [(ngModel)]="name" formControlName="name" type="text" />
    </div>
    <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['name'].errors.required">
          Name is required.
        </div>
    </div>
     <div class="form-group">
        <label>Address:</label>
        <input class="form-control" [(ngModel)]="address" formControlName="address" type="text" />
    </div>
    <div *ngIf="angForm.controls['address'].invalid && (angForm.controls['address'].dirty || angForm.controls['address'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['address'].errors.required">
          email is required.
        </div>
    </div>
    <button type="submit" (click)="buttonClicked()" class="btn btn-success">
        Save
    </button>
</form>

因此，由于这是一种反应形式，我尝试从输入中检索值，如下所示，在文本字段中分配ngModel属性：

<input class="form-control" [(ngModel)]="name" formControlName="name" type="text" />

在中TypeScript，我正在执行以下操作：

export class SampleComponent implements OnInit {

    constructor(private fb: FormBuilder) {
       this.validateForm();
    }

    ngOnInit() {

    } 

    angForm: FormGroup;
    name: string;
    address: string;

    //Retrieve value from input field on button click
    buttonClicked() {
       alert("Button works with the value: " + this.name);
    }
}

这很酷，我得到了预期的结果。但我有一个具有很多属性的模型。举个例子说：

export class SampleClass {
   name: string;
   address: string;
   ................
   With other lot of fields
}

所以我的问题是，如果我在前端定义的ngModel中有相同的模型属性，我可以做这样的事情吗，那么它是否有效或者可以定义如下：

this.SampleClass = this.angForm.value; //So all properties can be retrieved in one go

现在，我正在做的是一一绑定所有属性，如下所示：

obj: SampleClass ;

this.obj = new SampleClass();
this.obj.name= this.name;
this.obj.address= this.address;

标签： angularangular8angular-reactive-formsdata-retrieval

angular - 一次性获取响应式表单值

问题描述

解决方案

推荐阅读