Angular2 Biểu mẫu phản ứng formControl cho nút radio

Question

Tôi đang xây dựng một biểu mẫu trong Angular2 với Biểu mẫu phản ứng. Tôi đang sử dụng FormBuilder để tạo một nhóm các trường. Đối với hộp văn bản này hoạt động rất tốt. Nhưng tôi không thể tìm thấy một formControl cho các nút radio.

Tính năng này hoạt động như thế nào? Tôi có nên làm <input formControlName="gender" type="radio"> giống như tôi làm với đầu vào văn bản không?

Answer 1

Tôi có nên làm <input formControlName="gender" type="radio"> giống như tôi làm với đầu vào văn bản không?

Có.

Tính năng này hoạt động như thế nào?

Chỉ thị kiểm soát biểu mẫu sử dụng chỉ thị ControlValueAccessor để giao tiếp với phần tử gốc. Có các loại khác nhau của ControlValueAccessors cho mỗi đầu vào có thể. Giá trị đúng được chọn bởi selector của chỉ thị truy cập giá trị. Bộ chọn được dựa trên những gì type các <input> là. Khi bạn có type="radio", thì trình truy cập giá trị cho radio sẽ được sử dụng.

Answer 2

Trong thành phần của bạn, xác định nút radio của bạn như là một phần của mẫu của bạn:

export class MyComponent { 
    form: FormGroup; 
    constructor(fb: FormBuilder){ 
    this.form = fb.group({ 
     gender: "" 
    }); 
    } 
} 

Trong HTML thành phần của bạn, xây dựng hình của bạn:

<div class="form-group"> 
    <label>Please select your gender</label> 
    <div class="row"> 
    <label class="md-check"> 
     <input type="radio" value="female" name="gender" formControlName="gender"> 
     Female 
    </label> 

    <label class="md-check"> 
     <input type="radio" value="male" name="gender" formControlName="gender">  
     Male 
    </label> 
    </div> 
</div> 

Tôi giả sử bạn biết làm thế nào để xây dựng toàn bộ biểu mẫu bằng nút gửi của bạn, không được hiển thị ở đây.

Khi biểu mẫu được gửi, bạn có thể nhận được giá trị của nút radio ở đây:

let genderValue = this.form.value.gender; 

này hoặc là sẽ được "nữ" hay "male" tùy thuộc vào nút radio được kiểm tra.

Hy vọng điều này sẽ giúp bạn. Chúc may mắn!

Answer 3

Một nhỏ để thêm về biểu mẫu Phản ứng mà tôi nhận thấy. Nếu giá trị là một số nguyên nó cần phải để chuyển sang chuỗi hoặc nếu không nó nút radio sẽ không được lựa chọn ..

this.jobForm = this._fb.group({ 
        id: [res["job"]["id"]], 
        job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required], 
        title: [res["job"]["title"],Validators.required] 
       }); 

Answer 4

Angular Material controls được (chủ yếu) trưởng thành, đủ để sử dụng ngay bây giờ.

Mẫu của họ chủ yếu sử dụng ngModel, nhưng dưới đây là cách bạn có thể làm điều đó với formControlName.

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem"> 
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button> 
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button> 
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button> 
</mat-radio-group> 

Tôi đang sử dụng angular/flex-layout để đặt các nút của tôi trong cột dọc.

(cũng có thể đã làm value='Blue' cho một hằng số hoặc [value]="blueColorName" để đề cập đến một bất động sản mô hình.

tôi tin rằng có thể có một vấn đề với 0 bởi vì nó không phải là một giá trị 'truthy' vì vậy xem ra nếu bạn' gắn lại với enums (có thể không còn là một vấn đề nữa).