需要角形选择和输入

我希望选择和输入表单。我尝试按照有角度的网站上的教程进行操作,但是对我而言不起作用,或者我将某些内容混为一谈。所以,请您帮我解决一下。

那是我的html文件:

<form [formGroup]="angForm"  class="form-inline my-5 my-lg-0">
  <select #emoji class="textboxclass" type="text" placeholder="Emojy" aria-label="Post" required>
    <option value="" disabled selected>Emojy</option>
    <option value="angry" style="background-image:url(~assets/emoticons/png/angry.png);">angry</option>
    <option value="bored" style="background-image:url(~assets/emoticons/png/bored.png);">bored</option>
    <option value="confused" style="background-image:url(~assets/emoticons/png/confused.png);">confused</option>
    <option value="embarrassed" style="background-image:url(~assets/emoticons/png/embarrassed.png);">embarrassed</option>
    <option value="happy" style="background-image:url(~assets/emoticons/png/happy.png);">happy</option>
    <option value="kissing" style="background-image:url(~assets/emoticons/png/kissing.png);">kissing</option>
    <option value="unhappy" style="background-image:url(~assets/emoticons/png/unhappy.png);">unhappy</option>
  </select>
  <input #text id="postText" name="postText" class="form-control" type="text" placeholder="Write your Mood" aria-label="Post"
         formControlName="postText" required>
  <div *ngIf="angForm.controls['postText'].invalid && (angForm.controls['postText'].dirty
  || angForm.controls['postText'].touched)" class="alert alert-danger">
    <div *ngIf="angForm.controls['postText'].errors.required">Text required</div>
  </div>


</form>

<button class="btn btn-outline-success my-2 my-sm-0" (click)="postMood(emoji.value, text.value)">Post </button >

那就是我的组件文件:

import { Component, OnInit } from '@angular/core';
import {PostServiceService} from './post-service.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-post-service',
  templateUrl: './post-service.component.html',
  providers: [PostServiceService],
  styleUrls: ['./post-service.component.css']
})
export class PostServiceComponent implements OnInit {
  angForm: FormGroup;

  constructor(private postService: PostServiceService, private  fb: FormBuilder) {this.createForm(); }

  ngOnInit(): void {
  }

  createForm() {
    this.angForm = this.fb.group({postText: ['', Validators.required]});
  }

  postMood(emoji, text): void {
    this.postService.postMoods(emoji, text);
  }

}
评论