具有来自组件的动态数据更改的反应式表单

Question

I am setting up a reactive form in angular 6, where I have 2 input boxes(one input is an optional entry) and a submit button. If I enter a value to one input box and press submit, I need to fill the other input box by setting corresponding value from component side. If I enter values to both input boxes, then another function is called. If so how is two-way data bindin possible in form controls? I tried using ngModel, which is not working as expected and from stackoverflow answers, came to know that using ngmodel with form controls is soon to be deprecated. How Can I achieve the same if so? Below is the code snippet I am using:

Component.ts:

 export class myComponent implements OnInit { converterForm: FormGroup; model: myModel = new MyModel(); constructor(private formBuilder: FormBuilder, ) { this.myForm = this.formBuilder.group({ vOne: [this.model.vOne], vTwo: [this.model.vTwo], }); } onSubmit(searchInputs) { this.model.vTwo= "new"; //I need to edit the form value and reflect it in html.. two-waybinding this.converterForm.value.vOne = "edited"; console.log("Submit called"); } }

html file:

 <div> <div> <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"> <div> <div> <mat-form-field> <input id="vOne" matInput formControlName="vOne" [(ngModel)]="model.vOne"> </mat-form-field> </div> <div> <mat-form-field> <input id="vTwo" matInput formControlName="vTwo" [(ngModel)]="model.vTwo"> </mat-form-field> </div> </div> <div> <button mat-raised-button color="primary" type="submit" (click)="search()"> <mat-icon aria-label="Search icon">search </mat-icon> Search </button> </div> </form> </div>

thanks in advance.

Answer 1

Using valueChanges for access to live changes, and using setValue func for setting value per input.

in ts file try:

export class myComponent implements OnInit {

    myForm: FormGroup;       

    constructor(private formBuilder: FormBuilder) {

        this.myForm = this.formBuilder.group({
            vOne: [null],
            vTwo: [null],
        });

        searchHandler();
    }

    searchHandler() {
        const searchInputs = {
            vOne: '',
            vTwo: '',
        };

        for (const propertyName in searchInputs) {
            const property = this.form.get(propertyName);
            property.valueChanges
                .subscribe((searchText) => {
                    // this.form.controls.vOne.setValue('whatever');
                    // this.form.controls.vTwo.setValue('whatever');
                    // searchText is what keypress in input tag
                });
        }
    }

    onSubmit() {
        // this.form.controls.vOne.setValue('whatever');
        // this.form.controls.vTwo.setValue('whatever');
    }

}

in html file try:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div>
      <mat-form-field>
        <input matInput formControlName="vOne">
      </mat-form-field>
    </div>
    <div>
      <mat-form-field>
        <input matInput formControlName="vTwo">
      </mat-form-field>
    </div>
</form>