Javascript 如何使用被动形式连接值？

我想使用被动形式将2个值连接成1个标签。 在这种情况下，我没有使用ngModel绑定

 <label 
                     id="identificationCode"
                     name="identificationCode"
                     formControlName="lblIdCode">______</label>

<input type="text" 
                        id="reference"
                        name="reference"
                        formControlName="txtReference"
                        maxlength="250"
                        (change)="handleIdCode($event)">

<input type="text" 
                        id="publicacion"
                        name="publicacion"
                        formControlName="txtPublicacion"
                        maxlength="250"
                        (change)="handleIdCode($event)">

______

---

我想在用户写入时连接这两个输入文本，并自动将值反映到标签中。有没有像我们在没有更改事件的情况下使用模型绑定那样的方法？

一种方法是，您可以使用引用变量引用模板中的控件。像这样

<label 
 id="identificationCode"
 name="identificationCode">{{reference.value + " - " + publicacion.value}}</label>

<input type="text" 
 id="reference"
 name="reference"
 formControlName="txtReference"
 maxlength="250"
 #reference>

<input type="text" 
 id="publicacion"
 name="publicacion"
 formControlName="txtPublicacion"
 maxlength="250"
 #publicacion>

{{reference.value+“-”+publicacion.value}

重要的部分是每个输入上的

#参考

和

#publicacion

。这将控件链接到变量

---

然后可以在角度插值块中使用这些变量，如

{{reference.value+“-”+publicacion.value}

。您可以在该块中任意组合值。

尝试使用表单值，就像在.ts文件中使用一样

<label 
     id="identificationCode"
     name="identificationCode"
     formControlName="lblIdCode">
     {{form.value.reference + ' ' + form.value.publicacion}}
</label>

{{form.value.reference+''+form.value.publicacion}

使用标签显示信息。该标签并不意味着与反应形式绑定。如果您需要连接值以传递给API或用于任何用途，请在TS上尝试。用户无法更改Label的值，因此没有必要绑定它，而只显示连接的值

从标签中删除

formControlName=“lblIdCode”

，并为属性添加

<label>{{form.get('txtReference').value}} - {{form.get('txtPublicacion').value}}</label>

标签的定义：

export class FormreactiveComponent implements OnInit {
  lblIdCode$: Observable<string>;

  form = new FormGroup({
    txtReference: new FormControl(''),
    txtPublicacion: new FormControl('')    
   });

  constructor() { }

  ngOnInit() {

    const refCtrl = this.form.get('txtReference');
    const pubCtrl = this.form.get('txtPublicacion');

    this.lblIdCode$ = combineLatest(refCtrl.valueChanges.pipe(startWith(refCtrl.value)), 
                                   pubCtrl.valueChanges.pipe(startWith(pubCtrl.value)))
                      .pipe(map(([firstName, lastName]) => {
                        return `${firstName} ${lastName}`;
                      }));
  }    
}

<form name="form" [formGroup]="form">
      <div class="form-group">
        <label for="txtReference">Reference</label>
        <input type="text"  class="form-control" formControlName="txtReference"/>            
      </div>
      <div class="form-group">
        <label for="txtPublicacion">Publicacion</label>
        <input type="text" class="form-control" formControlName="txtPublicacion"/>            
      </div> 
      <div class="form-group">
        <label for="lblIdCode">{{lblIdCode$ | async}}</label>             
      </div>          
</form>

HTML元素表示用户界面中项目的标题

您可以创建这些值的get属性基，如中所示

成分

get referencePublicacionValues() : string {
 return `${this.form.get(txtReference).value} ${this.form.get('txtPublicacion').value}`
}

模板

演示尽管给出的答案效果很好。可能还有另一种声明性方法，它将利用输入文本的
valueChanges
可观察性。我们可以组合输入文本的
值更改
观察值，并映射到所需的输出，即连接
参考+Publicacion
，如下所示：

组件。ts:

export class FormreactiveComponent implements OnInit {
  lblIdCode$: Observable<string>;

  form = new FormGroup({
    txtReference: new FormControl(''),
    txtPublicacion: new FormControl('')    
   });

  constructor() { }

  ngOnInit() {

    const refCtrl = this.form.get('txtReference');
    const pubCtrl = this.form.get('txtPublicacion');

    this.lblIdCode$ = combineLatest(refCtrl.valueChanges.pipe(startWith(refCtrl.value)), 
                                   pubCtrl.valueChanges.pipe(startWith(pubCtrl.value)))
                      .pipe(map(([firstName, lastName]) => {
                        return `${firstName} ${lastName}`;
                      }));
  }    
}

<form name="form" [formGroup]="form">
      <div class="form-group">
        <label for="txtReference">Reference</label>
        <input type="text"  class="form-control" formControlName="txtReference"/>            
      </div>
      <div class="form-group">
        <label for="txtPublicacion">Publicacion</label>
        <input type="text" class="form-control" formControlName="txtPublicacion"/>            
      </div> 
      <div class="form-group">
        <label for="lblIdCode">{{lblIdCode$ | async}}</label>             
      </div>          
</form>

导出类FormreactiveComponent在NIT上实现{
lblIdCode$：可观察；
表单=新表单组({
txtReference:新表单控件（“”），
txtPublicacion:新表单控件（“”）
});
构造函数（）{}
恩戈尼尼特（）{
const refCtrl=this.form.get（'txtReference'）；
const pubCtrl=this.form.get（'txtPublicacion'）；
此.lblIdCode$=CombineTest（refCtrl.valueChanges.pipe（startWith（refCtrl.value）），
pubCtrl.valueChanges.pipe（startWith（pubCtrl.value）））
.pipe（映射（[firstName，lastName]）=>{
返回`${firstName}${lastName}`；
}));
}    
}

模板：

export class FormreactiveComponent implements OnInit {
  lblIdCode$: Observable<string>;

  form = new FormGroup({
    txtReference: new FormControl(''),
    txtPublicacion: new FormControl('')    
   });

  constructor() { }

  ngOnInit() {

    const refCtrl = this.form.get('txtReference');
    const pubCtrl = this.form.get('txtPublicacion');

    this.lblIdCode$ = combineLatest(refCtrl.valueChanges.pipe(startWith(refCtrl.value)), 
                                   pubCtrl.valueChanges.pipe(startWith(pubCtrl.value)))
                      .pipe(map(([firstName, lastName]) => {
                        return `${firstName} ${lastName}`;
                      }));
  }    
}

<form name="form" [formGroup]="form">
      <div class="form-group">
        <label for="txtReference">Reference</label>
        <input type="text"  class="form-control" formControlName="txtReference"/>            
      </div>
      <div class="form-group">
        <label for="txtPublicacion">Publicacion</label>
        <input type="text" class="form-control" formControlName="txtPublicacion"/>            
      </div> 
      <div class="form-group">
        <label for="lblIdCode">{{lblIdCode$ | async}}</label>             
      </div>          
</form>


参考文献
公开
{{lblIdCode$| async}}