You are here
app.component.html
星期三, 2023-01-04 01:58 — adminshiping1
<form [formGroup]="surveyForm">
<div formGroupName="basicQuestions">
<div>
<mat-form-field>
<input type="text" name="nickname" formControlName="name" matInput placeholder="暱稱" required />
</mat-form-field>
</div>
<div>
<mat-form-field>
<textarea name="intro_self" matInput placeholder="自我介紹" formControlName="intro" required
[errorStateMatcher]="earlyErrorStateMacher" cdkTextareaAutosize></textarea>
<mat-hint>簡單介紹一下你的興趣吧！</mat-hint>
<mat-error *ngIf="
surveyForm.get('basicQuestions').get('intro').hasError('required')
">請記得輸入自我介紹喔！</mat-error>
<mat-error *ngIf="
surveyForm.get('basicQuestions').get('intro').hasError('minlength')
">至少輸入10個字吧！</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input type="date" name="birthday" matInput placeholder="生日" />
</mat-form-field>
<mat-form-field>
<input type="text" name="country" matInput placeholder="國家" formControlName="country"
[matAutocomplete]="countries" />
</mat-form-field>
<mat-autocomplete #countries="matAutocomplete" [displayWith]="displayCountry">
<mat-option *ngFor="let country of countries$ | async" [value]="country">
<span [innerHTML]="highlightFiltered(country.name)"></span>
</mat-option>
</mat-autocomplete>
</div>
<div>
<mat-form-field>
<input type="text" name="majorTech" matInput placeholder="代表技術" formControlName="majorTech"
[matAutocomplete]="majorTechs" />
</mat-form-field>
<mat-autocomplete #majorTechs="matAutocomplete">
<mat-optgroup *ngFor="let techList of majorTechList" [label]="techList.name">
<mat-option *ngFor="let tech of techList.items" [value]="tech">
{{ tech }}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</div>
<div>
<mat-form-field>
<input type="text" name="birthday" matInput placeholder="生日" [matDatepicker]="birthdayPicker"
formControlName="birthday" [matDatepickerFilter]="familyDayFilter" (dateInput)="logDateInput($event)"
(dateChange)="logDateChange($event)" />
<mat-datepicker #birthdayPicker [startAt]="startDate" disabled="false"></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="birthdayPicker.opened = true">
打開Datepicker
</button>
</div>
<div>
<mat-select formControlName="interest" placeholder="你的休閒愛好?" #selectInterest multiple disableRipple
panelClass="blue-dropdown">
<mat-select-trigger>
共選擇了 {{ selectInterest }} 項興趣
</mat-select-trigger>
<mat-option [value]="undefined">無</mat-option>
<mat-optgroup *ngFor="let parent of nestInterestList; let index = index" [label]="parent.name"
[disabled]="index === 1">
<mat-option *ngFor="let child of parent.subItems" [value]="child.id">{{ child.name }}</mat-option>
</mat-optgroup>
</mat-select>
</div>
<div>
<mat-form-field floatLabel="always" [hideRequiredMarker]="true">
<input name="name" matInput formControlName="name" required>
<mat-placeholder>
<mat-icon>person</mat-icon>請輸入您的姓名</mat-placeholder>
</mat-form-field>
<mat-form-field floatLabel="never">
<input type="text" name="nickname" matInput placeholder="暱稱" />
</mat-form-field>
</div>
<div>
<mat-form-field hintLabel="最多輸入5個字">
<input name="name" matInput formControlName="name" maxlength="5" required>
<mat-hint align="end">
已輸入： {{ surveyForm.get('basicQuestions')?.get('name')?.value?.length || 0 }} / 5
</mat-hint>
<mat-error>姓名欄位有錯誤</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field floatLabel="never" color="accent">
<input type="text" name="nickname" matInput placeholder="暱稱" />
</mat-form-field>
</div>
<div>
<mat-form-field>
<input type="number" matInput placeholder="請問您的平均日常消費？">
<mat-icon matPrefix>attach_money</mat-icon>
<span matSuffix>新台幣</span>
</mat-form-field>
</div>
</div>
<div formGroupName="mainQuestions">
<div>
<mat-checkbox formControlName="payForAll" [indeterminate]="indeterminateSelectedPayFor" (change)="checkAllChange($event)">全部</mat-checkbox>
<mat-checkbox formControlName="payForBook" (change)="payForChange()" color="primary">書籍</mat-checkbox>
<mat-checkbox formControlName="payForMusic" (change)="payForChange()" color="accent">音樂</mat-checkbox>
<mat-checkbox formControlName="payForMovie" (change)="payForChange()" color="warn">電影</mat-checkbox>
</div>
<div>
<div>對於Angular，你的評價是？</div>
<mat-radio-group formControlName="angularLikeScore">
<mat-radio-button [value]="1">超討厭</mat-radio-button>
<mat-radio-button [value]="2">討厭</mat-radio-button>
<mat-radio-button [value]="3">普通</mat-radio-button>
<mat-radio-button [value]="4">喜歡</mat-radio-button>
<mat-radio-button [value]="5">超喜歡</mat-radio-button>
</mat-radio-group>
<div>對於Angular Material，你的評價是？</div>
<mat-radio-group formControlName="angularMaterialLikeScore">
...
</mat-radio-group>
</div>
<div>
<div>訂閱電子報</div>
<div>
<mat-slide-toggle formControlName="subscribeAngular">Angular技巧全集</mat-slide-toggle>
</div>
<div>
<mat-slide-toggle formControlName="subscribeAngularMaterial">Angular Material全攻略</mat-slide-toggle>
</div>
<div>
<mat-slide-toggle formControlName="subscribeNgRx">NgRx入門班</mat-slide-toggle>
</div>
</div>
<div>
<mat-form-field floatLabel="never" color="accent">
<input type="text" name="nickname" matInput placeholder="暱稱" />
</mat-form-field>
</div>
<div>
<div>選擇你最喜歡的顏色</div>
<div>
<span>Red</span>
<mat-slider formControlName="favoriteColorRed" min="0" max="255" step="1"></mat-slider>
</div>
<div>
<span>Green</span>
<mat-slider formControlName="favoriteColorGreen" min="0" max="255" step="1"></mat-slider>
</div>
<div>
<span>Blue</span>
<mat-slider formControlName="favoriteColorBlue" min="0" max="255" step="1"></mat-slider>
</div>
<div>RGB: ({{ selectedColorRed }}, {{ selectedColorGreen }}, {{ selectedColorBlue }})</div>
<div style="width: 50px; height: 50px; border: 1px solid #000" [ngStyle]="{background: selectedColorStyle}"></div>
</div>
<div>
<mat-form-field>
<input type="number" matInput placeholder="請問您的平均日常消費？">
<mat-icon matPrefix>attach_money</mat-icon>
<span matSuffix>新台幣</span>
</mat-form-field>
</div>
</div>
<div></div>
</form>
普通分类: