Radio-button ist nicht standardmäßig aktiviert, Winkel 2

Hier ist der code in der html-Datei :

       <div class="form-group">
            <div class="form-text">Some Question about Email and Phone Details?</div>


            <div>
                <input type="radio" value="1" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="EmailClicked()"
                ng-model="selectedOption"> Email</div>

            <div>

Text

Beide

in der Komponente.ts-Klasse, ich bin Einstellung der selectedOption zu 1. Wie diese :

export class TestComponent implements OnInit{
  signUpDetailsForm: FormGroup;
  public submitted : boolean;

  public selectedOption : string ='1';

Sehe ich die selectedOption Wert richtig eingestellt ist, wie in ngOnInit der Wert gedruckt wird, als 1 :

ngOnInit() {

 console.log('selectedOption='+this.selectedOption);

}

Ich habe auch versucht einen anderen Weg, dies zu lösen, indem Sie die Einstellung selectedOption in ng-init, aber funktioniert immer noch nicht .

<div ng-init="selectedOption=1">
                <div>
                    <input type="radio" value="1" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="EmailClicked()"
                    ng-model="selectedOption"> Email</div>

                <div>
                    <input type="radio" value="2" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="PhoneClicked()"> Text</div>
                <div>
                    <input type="radio" value="3" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="BothClicked()"> Both</div>

</div>

UPDATE

meine aktualisierte code sieht so aus und es geht trotzdem nicht wählen-radio-Standard:

<div class="form-group">
            <div class="form-text">Some Question about Email and Phone Details?</div>


            <div>
                <input type="radio" value="1" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="EmailClicked()"
                [(ngModel)]="selectedOption"> Email</div>

            <div>
                <input type="radio" value="2" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="PhoneClicked()"> Text</div>
            <div>
                <input type="radio" value="3" ng-model="selectedOption" [formControl]="signUpDetailsForm.controls['details']" name="details" (click)="BothClicked()"> Both</div>


        </div>

//Das ist in der Komponente.ts-Klasse:

public selectedOption :string;
ngOnInit() {

this.selectedOption="1";

}

Sind Sie auf der mixing-Winkel 1 mit 2?
ng-model="selectedOption" sollte [(ngModel)]="selectedOption"
Ich glaube nicht, dass ng-init ist eine Sache, im Winkel 2, so dass die Zeile sollte entfernt werden.
entfernt nginit und aktualisiert [(ngModel)]="selectedOption".. immer noch kein Glück ..
verwenden [value]="1" zu machen, eine number, statt als string, und dann versuchen this.selectedOption=1. Ihre syntax sieht gut aus, aber ich erinnere mich, vor einem ähnlichen Problem hier
Wenn Sie reaktive Formen sollte man IMHO nicht benutzen ngModel sowieso. Nur die Zuweisung der Wert zu den Kontrollen zu tun, wie this.signUpDetailsForm.get('details').setValueAndValidity('3')
Hier ist die plunker url für einfache Implementierung 3 radio-buttons . Ich bin versucht, wählen Sie die 1. radio-standardmäßig. Kann mir hier jemand helfen : plnkr.co/Bearbeiten/jTqdeh2QSC4oKmoiH8R1?p=Album Vorhören
public selectedOption :number = 1;

InformationsquelleAutor DevHelp | 2017-03-02

angular

bekam Tipp aus William ' s Kommentar. Antwort hier gepostet:

@Component({
  selector: 'my-app',
  template: `

<form>

     <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <header class="header col-md-8">
<div class="form-group">
                <div class="form-text">Some Question about Email and Phone Details?</div>


                <div>
                    <input type="radio" [value]="1"  name="details" [(ngModel)]="selectedOption">
                    Email</div>

                <div>
                    <input type="radio" [value]="2"  name="details" [(ngModel)]="selectedOption"> Text</div>
                <div>
                    <input type="radio" [value]="3"  name="details" [(ngModel)]="selectedOption"> Both</div>

            </div>

            </header>

        </div>
     </div>
</form>
  `,
})
export class App {
   public selectedOption :number =3;
  constructor() {

  }
}

Wenn Sie reaktive Formen sollten Sie nicht verwenden ngModel sowieso..

InformationsquelleAutor DevHelp

Ich hatte ein ähnliches problem, aber mit Winkel-mat-radio-Gruppe und die Bindung der Daten an die form-Gruppe. Anstelle von zwei-Wege-Bindung an das Modell binden Sie das Ergebnis der Auswahl für die Modell-und einen anderen Wert, um die form-Gruppe.

Auf der anderen Seite, denke ich, dass Sie nicht zu binden, müssen die Werte der radio-buttons, geben Sie nur den Wert, den radio-button emittieren, um Ihr Modell, wenn es aktiviert ist.

@Component({
  selector: 'my-app',
  template: `

<form>

 <div class="container">
    <div class="row">
        <div class="col-md-2"></div>
        <header class="header col-md-8">
<div class="form-group" [value]= "this.selectedOption">
            <div class="form-text">Some Question about Email and Phone 
Details?</div>


            <div>
                <input type="radio" value=1  name="details" 
(ngModel)="selectedOption">
                Email</div>

            <div>
                <input type="radio" value=2  name="details" 
(ngModel)="selectedOption"> Text</div>
            <div>
                <input type="radio" value=3  name="details" 
(ngModel)="selectedOption"> Both</div>

        </div>

        </header>

    </div>
 </div>
</form>
  `,
})
export class App {
  public selectedOption :number =3;
  constructor() {

  }
}

InformationsquelleAutor christianAV

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.