Mam proste pole formularza opcji wybranej w moim projekcie materiału kątowego:

Component.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

Gdzie [(value)]="modeSelect" jest wiążą się z właściwością modeLect w pliku komponent.ts

Chcę to zrobić, aby <mat-option value="domain">Domain</mat-option> jest wybrany domyślnie na obciążeniu strony.

ng-selected nie działał dla mnie

39
cup_of 1 czerwiec 2018, 23:46

11 odpowiedzi

Najlepsza odpowiedź

Pracujący stepllitz.

nie ma potrzeby używania ngModel lub form

W Twoim html:

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Mode">
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
  </mat-select>
</mat-form-field>

W komponentach właśnie ustawić własność publiczną selected do domyślnego:

selected = 'domain';

57
Narm 1 czerwiec 2018, 21:25

Spróbuj tego

<mat-form-field>
    <mat-select [(ngModel)]="modeselect" [placeholder]="modeselect">
        <mat-option value="domain">Domain</mat-option>
        <mat-option value="exact">Exact</mat-option>
    </mat-select>
</mat-form-field>

Składnik:

export class SelectValueBindingExample {
    public modeselect = 'Domain';
}

Demo na żywo

Również nie zapomnij zaimportować FormsModule w aplikacji.module

12
Vikas 1 czerwiec 2018, 21:27

Ten problem rozdrażał mnie przez jakiś czas. Używałem formularzy biernych i naprawiłem go za pomocą tej metody. Ps. Za pomocą kątowego 9 i materiału 9.

W haku cyklu "ngoninit"

1) Uzyskaj obiekt, który chcesz ustawić jako domyślny z tablicy lub literału obiektowego

const countryDefault = this.countries.find(c => c.number === '826');

Tutaj chwytam obiekt Wielkiej Brytanii z tablicy moich krajów.

2) Następnie ustaw obiekt FormsBuilder (mata Wybierz) z wartością domyślną.

this.addressForm.get('country').setValue(countryDefault.name);

3) Wreszcie ... Ustaw właściwość Value Value. W moim przypadku chcę wartość nazwy.

<mat-select formControlName="country">
   <mat-option *ngFor="let country of countries" [value]="country.name" >
          {{country.name}}

  </mat-option>
</mat-select>

Działa jak marzenie. Mam nadzieję, że to pomoże

2
Darren Street 19 marzec 2020, 19:11

Spróbuj tego:

<mat-select [(ngModel)]="defaultValue">
export class AppComponent {
  defaultValue = 'domain';
}
1
yer 1 czerwiec 2018, 21:16
I was able to set the default value or whatever value using the following:

Template:
          <mat-form-field>
              <mat-label>Holiday Destination</mat-label>
              <mat-select [(ngModel)]="selectedCity" formControlName="cityHoliday">
                <mat-option [value]="nyc">New York</mat-option>
                <mat-option [value]="london">London</mat-option>
                <mat-option [value]="india">Delhi</mat-option>
                <mat-option [value]="Oslo">Oslo</mat-option>
              </mat-select>
          </mat-form-field>

Component:

export class WhateverComponent implements OnInit{

selectedCity: string;    

}

ngOnInit() {
    this.selectedCity = 'london';
} 

}
1
meol 16 październik 2019, 14:32

Chciałbym tutaj dodać do odpowiedzi NOB i dodałem tak samo jak komentarz pod jej odpowiedzią.

Zasadniczo typ danych wartości przypisanej do [(wartość)] powinien być zgodny z typem katalogu [Wartość] używany do opcji matowych. Zwłaszcza jeśli ktoś wypełnia opcje za pomocą * ngfor jak poniżej

<mat-form-field fxHide.gt-sm='true'>
        <mat-select [(value)]="heroes[0].id">
          <mat-option *ngFor="let hero of heroes" [value]="hero.id">{{ hero.name }}</mat-option>
        </mat-select>
</mat-form-field>

Zauważ, że jeśli zmienisz [(Wartość)] = "Heroes [0] .id" do [(wartość)] = "Heroes [0]

Są to moje odkrycia, prosimy poprawić mnie w razie potrzeby.

1
Subbu 30 marzec 2020, 09:10

Zwykle zamierzasz to zrobić w szablonie z form grupami, formami reaktywnymi itp ...

    this.myForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      isPublished: ['false',Validators.required]
    });
0
Jonathan 22 marzec 2020, 22:05

przy użyciu modelu formularza (formularze reaktywne)

--- Html code--
<form [formGroup]="patientCategory">
<mat-form-field class="full-width">
    <mat-select placeholder="Category" formControlName="patientCategory">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let category of patientCategories" [value]="category">
            {{category.name}} 
        </mat-option>
    </mat-select>
</mat-form-field>

---- Kod TS ---

ngOnInit() {

        this.patientCategory = this.fb.group({
            patientCategory: [null, Validators.required]
        });

      const toSelect = "Your Default Value";
      this.patientCategory.get('patientCategory').setValue(toSelect);
    }

bez modelu formularza

--- html code --
<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

---- Kod TS - wybrany = 'opcja1'; Dbaj o rodzaj przypisywania wartości

0
Satish babu 28 kwiecień 2020, 08:21
On your typescript file, just assign this domain on modeSelect on Your ngOnInit() method like below:



 ngOnInit() {
        this.modeSelect = "domain";
      }

I na swoim HTML, użyj listy Wybierz.

<mat-form-field>
        <mat-select  [(value)]="modeSelect" placeholder="Mode">
          <mat-option value="domain">Domain</mat-option>
          <mat-option value="exact">Exact</mat-option>
        </mat-select>
      </mat-form-field>
0
Abdus Salam Azad 7 maj 2020, 19:53

HTML

<mat-form-field>
<mat-select [(ngModel)]="modeSelect" placeholder="Mode">
  <mat-option *ngFor="let obj of Array"  [value]="obj.value">{{obj.value}}</mat-option>
</mat-select>

Teraz ustaw domyślną wartość do

ModeSelect.

, gdzie otrzymujesz wartości w zmiennej tablicy.

-1
Irrfan23 17 luty 2020, 15:30

Zajęło mi kilka godzin, aby dowiedzieć się o tym, aż podobieństwo Datatypów między tablicą a domyślną wartością działał dla mnie ...

-1
Cornelius 21 kwiecień 2020, 02:34