Question

我的自定义文字输入：

import { Component, Inject, Injector, Input, Optional, ViewChild, Output, 
EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
import { ValueAccessorBase } from '../base-elements/value-accessor';

@Component({
selector: 'sm-input',
templateUrl: './sm-input.component.html',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SmInputComponent,
multi: true,
  }],
     styleUrls: ['./sm-input.component.scss'],
  })
 export class SmInputComponent extends ValueAccessorBase<string> {
 constructor(injector: Injector) {
 super(injector);
 } 
}

sm-input html： （我删除了没有必要的东西）

<div>
  <div *ngIf="label">
    <label>
       {{label}} 
    </label>
  </div>
  <div>
    <input  
      type="text" 
      pInputText
      [(ngModel)]="value"
    />
  </div>
</div>

我的表单：

import { HttpModule, Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'sm-input-example-in-reactive-from',
  templateUrl: './sm-input-example-in-reactive-from.component.html',
  styleUrls: ['./sm-input-example-in-reactive-from.component.scss']
})
export class SmInputExampleInReactiveFromComponent {

  public firstName: string = "Bob";
  myReactiveForm: FormGroup;
  constructor(fb: FormBuilder, private http: Http) {
    this.myReactiveForm = fb.group ({
      myField: [this.firstName, [Validators.required]],
    });
  }
  onSubmit(value) {
    console.log(`Submit: ${JSON.stringify(value)}`);
  }
}

html表单

<p-panel header="Reactive Form">
  <form action="" [formGroup]="myReactiveForm" (ngSubmit)="onSubmit(myReactiveForm.value)">
    <div class="ui-grid-row">
      <sm-input
        label="First Name"
        formControlName="myField">
      </sm-input> 
  </div>
  <div class="ui-grid-row">
      <div class="ui-g-2 ui-g-offset-5">
          <button type="Submit" class="" pButton [disabled]="!myReactiveForm.valid">Submit</button>
        </div> 
  </div>
</form>
</p-

在[-nModel]中使用的sm-input html中=＆＃34;值＆＃34;。

它的工作。但我不想用 [（ngMode）] =＆＃34;值＆＃34;

因为反应形式不需要与ngMode一起使用。我读过这篇文章 Two way binding in reactive forms

并且在驱动形式和反应形式之间进行混合并不是一个好主意。

angular doc：https://angular.io/guide/reactive-forms

＆＃34; ...因此，ngModel指令不属于ReactiveFormsModule＆＃34;。

我该怎么办？

谢谢。

Answer 1

您正在寻找.setValue()方法。顾名思义，它允许您以编程方式设置反应式表单控件的值。

以下是Angular指南中相关部分的链接：https://angular.io/guide/reactive-forms#populate-the-form-model-with-setvalue-and-patchvalue

以下是API中方法的链接：https://angular.io/api/forms/FormControl#setValue

第一种方法（使用BehaviorSubject表示自定义组件的当前输入值） 要获取自定义输入组件的值，您可以在自定义文本输入上创建一个流，表示它随时间变化的值。

inputValue$ = new BehaviorSubject('');

并在该输入字段上收听input事件。

<input (input)="onInputChange($event)">

然后使用输入中的最新值更新您的inputValue$信息流。

onInputChange(mostRecentInputValue: string) {
  this.inputValue$.next(mostRecentInputValue);
}

现在您在自定义输入上有一个可以在父级中订阅的流。

最后，在您的表单组件中，您可以使用@ViewChild装饰器来获取您的自定义输入组件，从而访问它的公共属性（包括inputValue$：

@ViewChild('sm-input') myCustomInput: SmInputComponent;

ngAfterViewInit() {
  this.myCustomInput.inputValue$.subscribe(mostRecentInput => {
     this.myReactiveForm.get('myField').setValue(mostRecentInput);
  }
}

第二种方法（使用@Output）

在您的自定义输入上：

<input (input)="onInputChange($event)">

然后使用带有EventEmitter装饰器的@Output将更改发送给父级;

@Output inputChange = new EventEmitter<string>();

onInputChange(mostRecentInputValue: string) {
  this.inputChange.emit(mostRecentInputValue);
}

然后在你的父html：

<sm-input (inputChange)="onSmInputChange($event)">

你的组件：

onSmInputChange(recentValue: string) {
  this.myReactiveForm.get('myField').setValue(recentValue);
}

Answer 2

<强>解决，谢谢大家！

自定义文字：

import { Component, Inject, Injector, Input, Optional, ViewChild, Output, 
EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
import { ValueAccessorBase } from '../base-elements/value-accessor';

@Component({
selector: 'sm-input',
templateUrl: './sm-input.component.html',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SmInputComponent,
multi: true,
  }],
     styleUrls: ['./sm-input.component.scss'],
  })
 export class SmInputComponent extends ValueAccessorBase<string> {
 constructor(injector: Injector) {
 super(injector);
 } 

  doChange($event) {
   this.value = $event.target.value;
  }
}

sm-input html：

<div>
  <div *ngIf="label">
    <label>
       {{label}} 
    </label>
  </div>
  <div>
    <input  
      type="text" 
      [value]"innerValue"
      (change)="doChange($event)"
    />
  </div>
</div>

（在ValueAccessorBase中定义的innerValue）

谢谢大家！

没有ngModel的反应形式内的自定义输入文本

2 个答案: