欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

app.component.html

<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>


普通分类: