Wie können wir den Standardwert des Radiobuttons in Winkel 2

Question

einstellen Ich habe ein modellgesteuertes Formular und möchte die Felder basierend auf Radio-Eingabe anzeigen. Code: -

 <div class="form-group"> 
      <md-radio-group class="form-control" id="radio1" formControlName="selection"> 
      <md-radio-button [value]="A" >A</md-radio-button> 
      <md-radio-button [value]="B">B</md-radio-button> 
      </md-radio-group> 
     </div> 

     <div class="form-group" *ngIf="selection.value=='A'"> 
      <md-input-container> 
       <textarea md-input placeholder="A" class="form-control" 
         formControlName="A" 
         style="border:none;"></textarea> 
      </md-input-container> 
     </div> 
     <div class="form-group" *ngIf="selection.value=='B'"> 
      <md-input-container> 
      <input md-input placeholder="B" class="form-control" 
        formControlName="B" 
        style="border:none;"> 
      </md-input-container>    
     </div> 

Erste Fehler wie "Can not Eigenschaft 'Wert' undefined lesen" Da kein Radio ausgewählt wird.

Wie kann ich angeben, die erste als Standard auszuwählen.

Answer 1

Sie müssen eine string als Wert für das Radio übergeben. Gerade jetzt versucht Angular eine Variable mit dem Namen A zu finden.

<md-radio-group class="form-control" [(ngModel)]="selection.value" 
       id="radio1" formControlName="selection"> 
    <md-radio-button [value]="'A'">A</md-radio-button> 
    <md-radio-button [value]="'B'">B</md-radio-button> 
</md-radio-group> 

Sie initialisieren das Radio als Sie einen Wert selection.value in der entsprechenden Komponente zuweisen:

class MyRadioComponent { 
    selection = {"value":"A"}; 
} 

Answer 2

Sie diesen Fehler, weil selection Formcontrol ist noch nicht created.There sind zwei mögliche Lösung für diese .

1. Verwenden safe navigation operator (?.) als *ngIf=selection?.value=='A' beim Zugriff auf den Wert des Radios.

   <div class="form-group" *ngIf="selection?.value=='A'"> 
       <md-input-container> 
        <textarea md-input placeholder="A" class="form-control" 
          formControlName="A" 
          style="border:none;"></textarea> 
       </md-input-container> 
   </div> 
   

2. Bereiten Sie Ihre Form vor der Ansicht gerendert wird. (Dh Ihre Form in Konstruktor der Komponente herzustellen.)

und Standardwert für jede Form Steuerung kann gegeben werden, wenn wir das schaffen Formularsteuerung.

zum Beispiel in Ihrem Fall können Sie den Standardwert von selection Formularsteuerung wie folgt einstellen.

let myForm = new FormGroup({ selection : new FormControl('A') }) 

Answer 3

Versuchen Sie folgendes:

this.complexForm = fb.group({ 
         'name': [null, Validators.required], 
         'description': [null, Validators.required], 
         'file': ["A", Validators.required], 
        });