订阅角度反应形式valueChanges

时间:2018-04-04 23:25:56

标签: angular forms reactive

我订阅了Angular被动形式的valueChanges。但是,我在更新表单时没有看到任何值。我希望看到价值变化,以便仅提交已更改的值。为什么没有记录?

班级:

form: FormGroup;
@Input() employee: Employee;

constructor(private _fb: FormBuilder) {
this.createForm();
}
ngOnInit() {
  this.form.valueChanges.subscribe(value => {
  console.log('value', value)
  })
}

ngOnChanges(changes: SimpleChanges) {
  if(this.employee &&
    changes.employee.currentValue !==
    changes.employee.previousValue) {
    this.updateForm();
  }
}

  createForm() {
  this.form = this._fb.group({
  name: [''],
  emergencyContactPhone: ['']
  }, {}
 )
}

updateForm() {
  this.form = this._fb.group({
    name: [this.employee.namePrefix],
    emergencyContactPhone: [this.employee.emergencyContact]
}, {}
)
}

submitForm() {
  if(this.form.valid) {
    this.saved.emit(this.form.value);
  }
}

模板:

<form [formGroup]="form" (blur)="submitForm($event)">
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-6 ui-lg-6">
<div class="ui-grid-col-4">
<span>Name:</span>
</div>
<div class="ui-grid-col-8">
<input formControlName="name" name="name" type="text"pInputText/>
</div>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-6">
<div class="ui-grid-col-4">
<span>Emergency Contact Phone:</span>
</div>
<div class="ui-grid-col-8">
<input formControlName="emergencyContactPhone" 
name="emergencyContactPhone" type="text" pInputText/>
</div>
</div>
</div>
<button class="submit-button" (click)="submitForm()">Submit</button>
</form>

0 个答案:

没有答案