将单选按钮值作为表单数据传递给组件,在Angular2中的表单提交

时间:2016-07-20 14:07:00

标签: forms angular

  1. 下面的Html模板
  2. <form class="form" #pubForm="ngForm">
            
          <div class="form-group">
            <label for="name">Publisher Name:</label>
            <input type="text" #name id="name" ngControl="name" #name="ngForm" class="form-control" placeholder="Enter Name" style="width:50%;" required maxlength="50">
            <div *ngIf="name.touched && name.errors">
                <div class="alert alert-danger" *ngIf="name.errors.required" style="width:50%;">
                    Name is Required (Maxlength is 50 characters)
                </div>
            </div>        
          </div>
          
          <div class="form-group">
            <label for="status">Status:</label>
            <label class="radio-inline">
                    <input type="radio" name="options" (click)="model.options = 'active'" [checked]="'active' === model.options">Active
            </label>
            <label class="radio-inline">
                    <input type="radio" name="options" (click)="model.options = 'inactive'" [checked]="'inactive' === model.options">Inactive
            </label>  
          </div>
          
         <div class="form-group">
            <button type="submit" class="btn btn-default" (click)="onSubmit(pubForm.value)">Submit</button>
            <button type="cancel" class="btn btn-default">Cancel</button>
          </div>  
    
    </form>

    1. 下面的组件代码
    2. model = { options: 'active' }; 
      
      onSubmit(form:any) : void {
        form.status = this.model.options; 
        console.log(form);    
      }

      现在在控制台日志中,我在表单提交上获得了对象,但是我希望传递单选按钮值,因为名称输入框值会自动传递到上面表单中的表单提交。如何将单选按钮选择作为表单数据?上面的输入名称将在点击提交时自动传递。

0 个答案:

没有答案