javascript - 自定义组件 Angular 所需的传递

Question

我有一个用于电话号码的自定义组件

我需要为它使用所需的标志

这是组件的HTML

  <form #phoneForm="ngForm" novalidate name="PhoneForm">
    <div class="form-row">
        <div class="form-group col-md-3">
           <p-dropdown
              #phoneCodeInput = ngModel
              [disabled]="!countrycodes.length"
              [options]="countrycodes"
              autoWidth="false"
              [(ngModel)]="phoneCode"
              (ngModelChange)="onNumberChange()"
              [style]="{ width: '100%', height: '100%'}"
              name="countryCodes"
              [autoWidth]="true"
            ></p-dropdown>
        </div>
        <div class="form-group col-md-9">
        <input
            [readonly] = "isReadOnly"
            #phoneNumberInput = ngModel
            number-directive
            class="form-control"
            placeholder="Enter phone number"
            [required] = "isFieldRequired"
            [(ngModel)]="phoneNumber"
            (ngModelChange)="onNumberChange()"
            class="form-control"
            type="text"
            name="name"
            maxlength="11"
        />
        </div>
    </div>
    <validation-messages [formCtrl]="phoneNumberInput"></validation-messages>
  </form>

这是组件的 typescript 代码，其中我使用 Input 参数进行验证

import { AppComponentBase } from '@shared/common/app-component-base';
import {
    Component,
    OnInit,
    Injector,
    AfterContentChecked,
    ViewChild,
    forwardRef,
    Input,
} from '@angular/core';
import * as lookup from 'country-telephone-data';
import { SelectItem } from 'primeng/api';
import { ControlValueAccessor, ValidationErrors, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';


@Component({
    selector: 'phone-number',
    templateUrl: './phone-number.component.html',
    providers: [
        { provide: NG_VALUE_ACCESSOR, useExisting: PhoneNumberComponent, multi: true },
        {
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => PhoneNumberComponent),
            multi: true
        }
    ]
})
export class PhoneNumberComponent extends AppComponentBase
    implements OnInit, ControlValueAccessor, AfterContentChecked {
    @Input() isRequired: boolean;
    @ViewChild('phoneForm') phoneForm;
    constructor(injector: Injector) {
        super(injector);
    }
    countrycodes: SelectItem[] = [];
    phoneCode: string;
    phoneNumber: string;
    required: string | boolean;
    isFieldRequired: boolean = false;
    isReadOnly: boolean = false;

    private changed = [];
    private touched = [];

    disabled: boolean;


    ngAfterContentChecked(): void {
        this.checkValidity();
    }

    checkValidity(): void {}
    propagateChange = (_: any) => {};

    get phoneNumberResult(): string {
        const result = `${this.phoneCode ? this.phoneCode : ''} ${
            this.phoneNumber ? this.phoneNumber : ''
        }`;
        return result;
    }

    set phoneNumberResult(value: string) {
        if (this.phoneNumberResult !== value) {
            const [phoneCode, phoneNumber] = value.split(' ');
            this.phoneCode = phoneCode;
            this.phoneNumber = phoneNumber;
            this.changed.forEach(f => f(value));
        }
    }

    writeValue(obj: string): void {
            this.phoneNumberResult = obj ? obj : '+44';
    }
    registerOnChange(fn: any): void {
        this.propagateChange = fn;
    }
    registerOnTouched(fn: any): void {
        this.touched.push(fn);
    }
    setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
    }


    ngOnInit(): void {
        if (this.isRequired === true) {
            this.isFieldRequired = true;
        }
        lookup.allCountries.forEach(element => {
            this.countrycodes.push({
                label: `+${element.dialCode}`,
                value: `+${element.dialCode}`,
            });
        });
    }

    onNumberChange(): void {
        this.propagateChange(this.phoneNumberResult);
    }


    validate(): ValidationErrors {
        if (!this.phoneForm.valid) {
            return { message: 'custom error' };
        }
        return null;
    }

    registerOnValidatorChange(fn: () => void): void {
        this.checkValidity = fn;
    }
}

现在我使用输入参数来实现所需的功能

下面是我现在如何使用我的组件

<phone-number [isRequired] =" isMobileNumberRequired" id="" #mobileEdit name="mobile" [(ngModel)]="tenant.mobileNumber" (ngModelChange)="onMobileChanged()"></phone-number>

我只需要在组件调用时使用 required 标志而不是传递参数。我该怎么做？

Answer 1

你可以使用<mat-form-field>成分。那么你可以控制required还有error message

<mat-form-field>
    <input matInput placeholder="Enter Phone Number" [formControl]="phoneNumber" required>
    <mat-error *ngIf="phoneNumber.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

为了更好地理解你可以关注这个 link和 example .