Question

我正在尝试使用棱角材质创建一个表单，但是，当前看起来像这样：

因此，很明显，缺少一些CSS，但我不知道在哪里。

我有一个像这样的组件：

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Feedback, Environments, FeedbackType } from '../shared/feedback';
import { FeedbackService} from '../services/feedback.service';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  feedbackForm: FormGroup;
  feedback: Feedback;
  feebackTypes = FeedbackType;
  environments = Environments;
  @ViewChild('fform') feedbackFormDirective;

  visibilityForm = true;
  visibilityProgress = false;

  formErrors = {
    'rd_number': '',
    'type': '',
    'environment': '',
    'email': '',
    'description': ''
  };

  validationMessages = {
    'rd_number': {
      'required': 'You have to provide a RD number.',
    },

    'email': {
      'required': 'Email is required.',
      'email': 'Email not in valid format.'
    },
    'description': {
      'required': 'Please provide a detailed description.',
    }
  };

  constructor(private fb: FormBuilder,
    private feedBackService: FeedbackService) {
    this.createForm();
   }

  ngOnInit() {
  }

  createForm() {
    this.feedbackForm = this.fb.group({
      rd_number: ['', [Validators.required]],
      type: '',
      environment: 'env1',
      email: ['', [Validators.required, Validators.email]],
      description: ['', [Validators.required]]
    });

    this.feedbackForm.valueChanges
      .subscribe(data => this.onValueChanged(data));

      this.onValueChanged(); // (re)set form validation messages
  }

  onValueChanged(data?: any) {
    if (!this.feedbackForm) {
      return;
    }
    const form = this.feedbackForm;
    for (const field in this.formErrors) {
      if (this.formErrors.hasOwnProperty(field)) {
        // clear previous error messages (if any)
        this.formErrors[field] = '';
        const control = form.get(field);
        if (control && control.dirty && !control.valid) {
          const messages = this.validationMessages[field];
          for (const key in control.errors) {
            if (control.errors.hasOwnProperty(key)) {
              this.formErrors[field] += messages[key] + ' ';
            }
          }
        }
      }
    }
  }

  onSubmit() {
    this.visibilityForm = false;
    this.visibilityProgress = true;
    this.feedBackService.submitFeedback(this.feedbackForm.value)
      .subscribe(fb => {
        this.visibilityProgress = false;
        this.feedback = fb;
        setTimeout(f => {
          this.visibilityForm = true;
          this.feedback = null;
          }, 5000);
    });

    this.feedbackForm.reset({
      rd_number: '',
      type: '',
      environment: 'env1',
      email: '',
      description: ''
    });
    this.feedbackFormDirective.resetForm();
  }

}

，相应的HTML如下所示：

<div class="container"
  fxLayout="column"
  fxLayoutGap="10px">


  <div fxFlex fxFlexOffset="20px" class="form-size">
    <h3>Send us your feedback</h3>
    <p>{{ feedbackForm.value | json }} {{ feedbackForm.status | json }}</p>
    <form novalidate [formGroup]="feedbackForm" #fform="ngForm" (ngSubmit)="onSubmit()" *ngIf="visibilityForm">
      <p>
        <mat-form-field class="half-width">
          <input matInput formControlName="rd_number" placeholder="RD number" type="text" required>
          <mat-error *ngIf="formErrors.rd_number">
            {{ formErrors.rd_number }}
          </mat-error>
        </mat-form-field>

        <mat-form-field class="half-width">
          <input matInput formControlName="email" placeholder="Email" type="email" email required>
          <mat-error *ngIf="formErrors.email">
              {{ formErrors.email }}
          </mat-error>
        </mat-form-field>
      </p>
      <table class="form-size">
        <td>
          <mat-form-field class="full-width">
            <mat-select placeholder="Type" formControlName="type">
              <mat-option *ngFor="let ftype of feedbackTypes" [value]="ftype">
                {{ ftype }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field class="full-width">
            <mat-select placeholder="Environment" formControlName="environment">
              <mat-option *ngFor="let env of environments" [value]="env">
                {{ env }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </td>
      </table>
      <p>
        <mat-form-field class="full-width">
          <textarea matInput formControlName="description" placeholder="Your Feedback" rows=12>
          </textarea>
        </mat-form-field>
      </p>
      <button type="submit" mat-button class="background-primary text-floral-white"
        [disabled]="feedbackForm.invalid">Submit</button>
    </form>
  </div>
  <div *ngIf="visibilityProgress">
    <mat-spinner></mat-spinner><h4>Your data are being processed... Please wait</h4>
  </div> 

</div>

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule} from '@angular/material/slide-toggle';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSliderModule } from '@angular/material/slider';

import 'hammerjs';

import { FlexLayoutModule} from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { ProcessHTTPMsgService } from './services/process-httpmsg.service';

import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';

import { baseURL } from './shared/baseurl';

@NgModule({
  declarations: [
    AppComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatListModule,
    MatToolbarModule,
    MatGridListModule,
    MatCardModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatCheckboxModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatProgressSpinnerModule,
    MatSliderModule
  ],
  providers: [
    ProcessHTTPMsgService,
    { provide: 'BaseURL', useValue: baseURL }],
  bootstrap: [AppComponent]
})
export class AppModule { }

有什么想法我可能会错过吗？

Answer 1

在您的styles.css / styles.scss中添加以下行：@import '@ angular / material / prebuilt-themes / deeppurple-amber.css';

有关在Angular Material中进行主题设置的更多信息，请参见documentation。

Answer 2

正如角度材料文档所说，您需要在angular.json中将具有角度材料主题的文件包含到全局样式中

角材不加载

2 个答案: