присвоить значение скрытому ngModel

Question

по какой-то причине мне нужно присвоить одно и то же значение в двух входах. означает, что я должен установить значение переменной first в second без необходимости, чтобы пользователь сам писал ее

модель

export class Exp{

    id: number;
    first: any;
    second: any;

}

html

    <label>enter value of first :</label>
    <input type="text" [(ngModel)]="exp.first" class="form-control">

     <input type="hidden" [(ngModel)]="exp.second" class="form-control">

           <button (click)="add()">add</button>

ц

   add(){
    this.myService.add(this.exp).subscribe(
       data => {this.exp=data;}, 
       error => {console.log('error');}
     );

  }

Answer 1

Здесь у вас есть Stackblitz demo .

Изначально вы можете установить переменную ссылки на шаблон для первого входа, получив директиву ngModel:

<input type="text" #first="ngModel" [(ngModel)]="exp.first" class="form-control">

После этого вы можете получить ссылку на этот элемент управления в машинописном тексте, подписаться на его изменения и скопировать в second в модели:

@ViewChild('first') _ngModelFirst: NgModel;

// Best practice: let's unsubscribe from all observables
// when this component is destroyed
private _destroy$ = new Subject<void>();

exp: Exp = {
  id: 1,
  first: '',
  second: ''
};

ngAfterViewInit() {
  this._ngModelFirst.valueChanges
    // Best practice: this pipe is just to finish the subscription
    // when this._destroy$ emits
    .pipe(takeUntil(this._destroy$))
    .subscribe((value: string | null) => {
      this.exp.second = value;
    });
}

ngOnDestroy() {
  if (this._destroy$ && !this._destroy$) {
    this._destroy$.next();
    this._destroy$.complete();
  }
}