Html 从组件动态更改数据的被动表单

我在angular 6中设置了一个被动表单，其中有两个输入框（一个输入是可选输入）和一个提交按钮。如果我在一个输入框中输入一个值并按submit，我需要通过从组件侧设置相应的值来填充另一个输入框。如果我在两个输入框中输入值，则调用另一个函数。如果是这样的话，如何在表单控件中实现双向数据绑定？我尝试过使用ngModel，但它并没有像预期的那样工作，从stackoverflow answers中，我知道将ngModel与表单控件一起使用很快就会被弃用。如果是这样，我怎样才能达到同样的效果？下面是我正在使用的代码片段：

组件1.ts：

导出类myComponent实现OnInit{
converterForm：FormGroup；
model:myModel=newmymodel（）；
构造函数（私有formBuilder:formBuilder，）{
this.myForm=this.formBuilder.group({
沃恩：[this.model.vOne]，
vTwo:[this.model.vTwo]，
});
}
onSubmit（搜索输入）{
this.model.vTwo=“new”//我需要编辑表单值并在html中反映它。.双向绑定
this.converterForm.value.vOne=“已编辑”；
console.log（“提交调用”）；
}
}

使用valueChanges访问实时更改，使用setValuefunc设置每个输入的值

在ts文件中，请尝试：

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

}

<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>

在html文件中，请尝试：

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

}

<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>