Question

有我的源代码：

<div class="form-group required">
  <label class="control-label col-sm-4" for="email">Subscriber Corporate Address:</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="subscriberCorporateAddress" placeholder="Subscriber Corporate Address" formControlName="subscriberCorporateAddress" name="subscriberCorporateAddress"
       [(ngModel)]="subscriberAddedDetail.subscriberCorporateAddress"  required>
  </div>
</div> 
<div class="form-group required">
  <label class="control-label col-sm-4" for="email">Subscriber Billing Address:</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="subscriberBillingAddress" placeholder="Subscriber Billing Address" formControlName="subscriberBillingAddress" name="subscriberBillingAddress"
       required>
  </div>
 </div>

如果选中复选框，我想在帐单邮寄地址中复制公司地址。

Answer 1

单击复选框，将基本设置与公司地址关联的模型值的事件绑定到帐单邮寄地址，如下所示：

    //our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <label>Corporate Address:</label><br/>
    <br/><input type="text" [(ngModel)]="corpAddr"><br/><br/><br/>
    <label>Billing Address:</label><br/>
    <br/>
    <input type="text" [(ngModel)]="billAddr"><br/><br/><br/>
    <label>KEEP SAME</label>
    <input type="checkbox" [checked]="false" (change)="updateAddrs($event)">
  `,
})
export class App {
  corpAddr: string;
  billAddr: string;
  updateAddrs(event) { 
    if(event.target.checked){
      this.billAddr = this.corpAddr;
    }
    else{
      this.billAddr = '';
    }
  }

}

@NgModule({
  imports: [ BrowserModule, FormsModule  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

这是工作plunk。

如何使用angular 4通过复选框将文本从一个文本框复制到另一个文本框？

1 个答案: