NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Angular material práce s formControllNames

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Ladislav Niderle
Člen
Avatar
Ladislav Niderle:2.9.2020 9:59

Ahoj, nemohl by mi někdo poradit jak správně mohu vytvořit novou komponentu, která bude mít "nějak" předanou informaci formControllName? SNažím se zjednodušit zápis, abych toho neměl moc, tak to chci udělat zvlášť a pak bych dal jen tu novou komponentu a předával bych ji data co potřebuje, ale samotný form bude jinde.

Zkusil jsem: Snažil jsem se předat jako vstupní parametr právě controllName jako string, ale pořád to házelo výjimky. Takže jsem nakonec to nakonec začal psát postaru, ale u toho je moc věcí, které se oprakují a rád bych ten kód měl čistý nebo aspoň v rámci možnosti.

Chci docílit: SNažím se dosáhnout toho, abych daný kus kódu mohl mít vtyvořen jako malou komponentu, která podle vstupu bude nakonec ukazovat buď jenom detail, nebo tam bude i možnost zadání či editace.

 
Odpovědět
2.9.2020 9:59
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:2.9.2020 10:20

Ahoj, bez kódu a ukázky toho co jsi už zkoušel se těžko radí. Já bych to udělal asi takhle:

  1. Nová komponenta s @Input() formControllName
  2. V HTML pak vytvoříš požadovaný input, kterému nabindujes formControllName
  3. Novou kompomentu pouzijes

Zkus tohle a když si pořád nebudeš vědět rady, dej sem nějaký kód na kterém bude vidět tvůj postup :-)

Nahoru Odpovědět
2.9.2020 10:20
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Ladislav Niderle
Člen
Avatar
Odpovídá na Petr Štechmüller
Ladislav Niderle:2.9.2020 10:40

Ahoj, v tom jednom vizuálu bych si představil právě mít něco takového:

<form [formGroup]="form" (ngSubmit)="create()">
    <app-controll-input [controllName]="test1" [label]="label1" [icon]="busisnis" [type]="text"/>
    <app-controll-input [controllName]="test2" [label]="label2" [icon]="label" [type]="text"/>
    <app-controll-input [controllName]="test3" [label]="label3" [icon]="label" [type]="text"/>
</form>

A právě bych na to chtěl mít vytvořenou tu druhou komponentu, která by vypadala následovně:

<span class="create-icon-location mat-icon mat-list-icon detail-list-item mat-primary material-icons">
          <mat-icon>{{icon}}
          </mat-icon>
          </span>
<mat-form-field
        class="lsm-record-form-field detail-list-item">
    <input
            placeholder="SAP ID"
            [formControlName]="controllName"
            [type]="text"
            matInput>
</mat-form-field>

Tato komponenta bude nakonec umět i jen zobrazení bez editace, ale toto je pro mně to hlavní co bych potřeboval.

 
Nahoru Odpovědět
2.9.2020 10:40
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:2.9.2020 10:42

Ok, tak k tomu druhému přiloženému HTML vytvoř komponentu v TS a přidej potřebné parametry.

Nahoru Odpovědět
2.9.2020 10:42
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Ladislav Niderle
Člen
Avatar
Odpovídá na Petr Štechmüller
Ladislav Niderle:2.9.2020 11:19

A jaký typ mám dát tomu formCotrnollu, co budu předávat?

 
Nahoru Odpovědět
2.9.2020 11:19
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:2.9.2020 11:26

Dej tam typ "string"

Nahoru Odpovědět
2.9.2020 11:26
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Ladislav Niderle
Člen
Avatar
Odpovídá na Petr Štechmüller
Ladislav Niderle:2.9.2020 11:50

Měl bych ještě jeden dotaz, když mám tento kód, tak to funguje v pořádku a každý detail je na samotném řádku:

<div style="width: 80%">
<mat-list>
      <app-detail-list-item
        iconName="local_activity"
        label="SAP ID"
        [value]="lsmNevilLicence.corporateAccountNo | sapId"
        [clipboardEnabled]="true">
      </app-detail-list-item>
      <app-detail-list-item
        iconName="business"
        label="Název"
        [value]="lsmNevilLicence.organization">
      </app-detail-list-item>
</mat-list>
</div>
<div style="width: 80%">
<mat-list>
      <app-detail-list-item
        iconName="local_activity"
        label="SAP ID"
        [value]="lsmNevilLicence.corporateAccountNo | sapId"
        [clipboardEnabled]="true">
      </app-detail-list-item>
      <app-detail-list-item
        iconName="business"
        label="Název"
        [value]="lsmNevilLicence.organization">
      </app-detail-list-item>
</mat-list>
</div>

Ale když celý mat-list obalým do formu, tak to kompletně rozhodí a i když mám ostylyzované a mám tam více sloupců, tak mi to všechno hodí pod jeden. Setkal jsi se s tím?

Editováno 2.9.2020 11:51
 
Nahoru Odpovědět
2.9.2020 11:50
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:2.9.2020 11:54

Obávám se, že s tímhle už neporadím. Celé knihovně Angular Material se snažím vyhýbat velkým obloukem :-D

Nahoru Odpovědět
2.9.2020 11:54
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Ladislav Niderle
Člen
Avatar
Odpovídá na Petr Štechmüller
Ladislav Niderle:2.9.2020 12:29

Dobře, i tak moc děkuji

 
Nahoru Odpovědět
2.9.2020 12:29
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.