Угловой 6 - Отображение компонентов формы в зависимости от сечения радиокнопки

Question

Сценарий:

• Я работаю над формой, использующей угловой материал и угловой 6
• Я хотел бы отобразить соответствующие текстовые поля согласнотип, выбранный из переключателей, которые дают их.

Код, который я использовал для переключателя

<div class="form-group m-form__group row">
    <div class="m-radio-list">
        <mat-radio-group>
            <p>
                <mat-radio-button value="newBusiness">New</mat-radio-button>
                <mat-radio-button value="renewal">Renewal</mat-radio-button>
                <mat-radio-button value="rollover">Old</mat-radio-button>
            </p>
        </mat-radio-group>
    </div>
</div>

Todo:

• Таким образом, основываясь на этих 3 типах, когда пользователь выбирает определенный тип, например, новый, который я хочу отобразить ему текстовые поля для имени и номера,
  если другое значение, тогда другие текстовые поля.

Answer 1

Демо с Bydefault установлен флажок

Код приложения: https://stackblitz.com/edit/angular-27et6e?file=src/app/app.component.ts
(в этом коде я установил третий флажок по умолчанию, вы можете выбрать первый, если хотите)

Подход:

• Сделать 2 div-контейнера, один для radio-buttons, другой для отображения соответствующего входного контейнера в соответствии с выбранным radio-button.
• Вы можете использовать событие change, например (change)="changeComboo($event)",
  . Я только что использовал ngModel, чтобы связать значение с переменной, такой как [(ngModel)]="favoriteSeason".

Обновление 1 (установите флажок по умолчанию сначала):

• Поскольку mat-radio-group связывается с использованием [(ngModel)]="favoriteSeason",
  Так что в функции ngOnint() - мы можем присвоить этой favoriteSeason переменной значение по умолчанию через this.favoriteSeason = this.seasons[0]; (если мы хотим установите первый флажок) .

Answer 2

Попробуй вот так

<div class="radio">  
   <label>  
       <input type="radio" name="radio" value="New" (click)="setradio('New')" [checked]='true' ngModel>  
      New
  </label>  
</div>  
<div class="radio">  
 <label>  
    <input type="radio" name="radio" value="Renewal" (click)="setradio('Renewal')" ngModel>  
        Renewal
  </label>  
</div>  

<div *ngIf="isSelected('New')" >  
    <input type="text"/>   New radio button selected  
</div>  

<div *ngIf="isSelected('Renewal')">  
    <input type="text"/> Renewal radio button selected  
</div>

в вашем component.ts

private selectedLink: string="New";        

setradio(e: string): void {
    this.selectedLink = e;  
}  

isSelected(name: string): boolean {  

    if (!this.selectedLink) { // if no radio button is selected, always return false so every nothing is shown  
        return false;  
    }    

    return (this.selectedLink === name); // if current radio button is selected, return true, else return false  
}